React Interview Questions
Deep dive into React 18, hooks, performance optimization, and scenario-based debugging. Prepare with these 4 real-world questions covering beginner to advanced scenarios.
Why does React need a Virtual DOM?
Simple Answer
React uses a Virtual DOM because updating the real browser DOM is slow. The Virtual DOM is a lightweight copy of the real DOM. When state changes, React updates the Virtual DOM first, compares it with the previous version (diffing), and then only updates the exact parts of the real DOM that changed.
Detailed Answer
Directly manipulating the real DOM triggers expensive browser operations like layout recalculations and repaints. React minimizes this by batching updates. It creates a new Virtual DOM tree, uses a heuristic O(n) algorithm to compare it with the old tree, and generates a list of minimal operations to apply to the real DOM (Reconciliation).
Interview Tip
Don't just say 'it is faster'. Explain the terms 'Diffing' and 'Reconciliation'.
Common Mistake
Thinking the Virtual DOM is the same as the Shadow DOM (used in Web Components). They are entirely different.
Real World Example
If you have a table with 1000 rows and change one cell, plain JavaScript might re-render the entire table. React will only update that single cell (`<td>`), saving massive amounts of processing power.
Explain the useEffect dependency array and how it works.
Simple Answer
The dependency array tells React when to re-run the effect. If you leave it empty `[]`, it runs only once on mount. If you omit it entirely, it runs on every render. If you add variables `[data]`, it runs when `data` changes.
Detailed Answer
React uses `Object.is` to compare the current dependencies with the previous ones. If the references have changed, the effect runs. This is why passing objects, arrays, or functions directly as dependencies can cause infinite loops unless they are memoized with useMemo or useCallback, because their memory references change on every render.
Interview Tip
Mention the 'exhaustive-deps' ESLint rule and why it's dangerous to suppress it.
Common Mistake
Passing non-primitives (like a newly created object `{}` or function `() => {}`) into the dependency array without memoization.
Real World Example
Fetching user data based on a user ID: `useEffect(() => fetchUser(userId), [userId])`. It fetches on mount, and re-fetches only when the user clicks a different profile.
What is Prop Drilling and how do you avoid it?
Simple Answer
Prop drilling is when you pass data through multiple layers of components just to get it to a deeply nested child that needs it. You can avoid it by using the Context API, Redux, or Zustand.
Detailed Answer
While prop drilling is fine for 1-2 levels, going deeper creates tightly coupled, hard-to-maintain code where intermediate components possess props they don't use. Aside from Context/Redux, a cleaner React pattern to avoid it is 'Component Composition'—passing components as children.
Interview Tip
Always mention 'Component Composition' (children props) as a lightweight alternative to Context.
Common Mistake
Reaching for Redux immediately when a simple React Context or passing children would suffice.
Real World Example
Passing a `theme` prop from `<App>` to `<Main>` to `<Sidebar>` to `<Button>`. Instead, wrap `<App>` in a ThemeProvider and let `<Button>` use `useContext(ThemeContext)`.
How does React 18 Concurrent Rendering work?
Simple Answer
Concurrent rendering allows React to interrupt a long render. Before React 18, rendering couldn't be paused. Now, React can pause a heavy background render to immediately respond to user input like typing or clicking.
Detailed Answer
Concurrent features (like useTransition and useDeferredValue) mark certain state updates as 'non-urgent'. React maintains multiple versions of the UI in memory. If an urgent update (like a keystroke) comes in, React pauses the non-urgent rendering, handles the keystroke, and then resumes the background rendering.
Interview Tip
Emphasize that 'Concurrent Mode' isn't a mode, but a set of opt-in features triggered by `startTransition`.
Common Mistake
Thinking concurrent rendering makes React inherently multithreaded (it's still single-threaded JavaScript, it just yields to the browser).
Real World Example
A search input that filters a list of 10,000 cities. Typing previously froze the browser. With `useTransition`, the input updates instantly, while the city list updates in the background.
Test Your React Knowledge
Take this quick interactive quiz to see if you retained the key concepts.
React Mastery Quiz
Question 1 of 3Why does React need a Virtual DOM?
Keep Building Your React Skills
Interview prep works best when combined with hands-on practice. Use these resources to deepen your understanding and build portfolio projects.