Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
React · Question Set
React Router, Optimization & Real-World Scenarios interview questions for placements and exams.
Questions
18
Included in this set
Subject
React
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React.
Use proper input validation to prevent XSS, avoid dangerouslySetInnerHTML, use HTTPS, manage environment variables securely, and implement authentication with tokens or cookies properly.
For complete preparation, combine this set with full subject-wise practice for React. You can also explore other subjects and sets from the links below.
React apps can be optimized by using memoization (React.memo, useMemo, useCallback), code-splitting, lazy loading, virtualization for lists, and avoiding unnecessary re-renders by properly managing dependencies and keys.
In React Router v6, you can redirect users using the Navigate component after successful login. Once authentication succeeds, set a state like isLoggedIn to true and conditionally render <Navigate to='/dashboard' /> to send the user to the dashboard automatically.
if (isLoggedIn) return <Navigate to='/dashboard' />; else return <LoginForm />;
<Redirect> was used in React Router v5 for navigation. In React Router v6, it was replaced with <Navigate>. <Navigate> is a declarative way to redirect users to another route programmatically and is simpler to use with hooks and state.
<Navigate to='/home' replace />
Dynamic routes let you match variable segments in URLs, such as user IDs or product IDs. They are defined using a colon prefix like ':id', and React Router provides these values via the useParams() hook.
<Route path='/user/:id' element={<UserProfile />} />;
const { id } = useParams();Create a wrapper route that checks if the user is authenticated. If not, redirect them to login. This ensures only logged-in users can access certain pages.
const PrivateRoute = ({ children }) => isAuth ? children : <Navigate to='/login' />;Code splitting divides large bundles into smaller chunks, so only the code needed for a page loads. It reduces initial load time and improves app performance. It’s done using dynamic imports or React.lazy().
const About = React.lazy(() => import('./About'));Use React.lazy() to load components only when needed, wrapped inside a <Suspense> fallback. This helps reduce bundle size and speeds up initial load.
const Contact = React.lazy(() => import('./Contact'));
<Suspense fallback={<p>Loading...</p>}><Contact /></Suspense>Global state can be handled using Redux for predictable centralized state, Context API for lightweight shared state, or Zustand for simpler and faster store-based state management without boilerplate.
Fetch and Axios are used for HTTP requests. React Query helps manage server state with caching, auto refetching, and error handling. Always handle loading and error states during fetch operations.
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData)
.catch(console.error);
}, []);When a component unmounts during an async call, you should cancel ongoing operations. This can be done with AbortController, cleanup functions in useEffect, or checking mounted flags before updating state.
useEffect(() => {
const controller = new AbortController();
fetch('/api', { signal: controller.signal });
return () => controller.abort();
}, []);Use controlled components to manage input values through React state. For validation, libraries like Formik, React Hook Form, or Yup help manage form state, validation, and submission easily.
The command 'npm install -g create-react-app' globally installs the tool for creating new React projects quickly.
Webpack is a module bundler that compiles and optimizes JavaScript, CSS, and assets into one or more bundles for production use.
Unnecessary re-renders happen when state or props change unnecessarily, or when functions or objects are recreated each render. Prevent them using React.memo, useMemo, useCallback, and by avoiding direct mutations of state.
Keys help React identify which elements changed, added, or removed in a list. This allows React to re-render only the modified items instead of the whole list, improving performance.
{items.map(item => <li key={item.id}>{item.name}</li>)}React is flexible, integrates easily, supports SSR, and offers performance benefits with Virtual DOM.
useParams() retrieves URL parameters like /user/:id, while useSearchParams() or URLSearchParams helps read query strings like ?sort=desc. These hooks simplify dynamic navigation and filtering in apps.
const { id } = useParams();
const [query] = useSearchParams();
const sort = query.get('sort');