React Interview Questions and Answers
These React questions come up in almost every frontend interview. Here are crisp, interview-ready answers to the most common ones — with the reasoning interviewers want to hear.
What is the virtual DOM and how does reconciliation work?
The virtual DOM is a lightweight JS copy of the UI. On each render React builds a new tree, diffs it against the old one (reconciliation) using an O(n) heuristic, and commits only the actual differences to the real DOM — which is what keeps updates fast.
What's the difference between props and state?
Props are read-only inputs passed from a parent; state is private, mutable data a component owns. Changing state triggers a re-render; a component must never modify its own props.
Why must you treat state as immutable?
React compares by reference (Object.is). If you mutate an object/array in place, the reference is unchanged, so React may skip the re-render. Always create a new value with spread/map/filter.
What does useEffect do and when does it run?
It synchronises a component with external systems (network, DOM, subscriptions, timers) and runs after paint. The dependency array controls re-runs: [] = mount, [a] = when a changes, omitted = every render.
Why do keys matter in lists?
Keys let React match list items across renders. A stable id preserves each item's DOM and state; using the array index breaks when items reorder/insert/delete, causing wrong state to stick to the wrong row.
{todos.map(t => <Row key={t.id} todo={t} />)}What is React.memo and when does it help?
It skips re-rendering a component when its props are shallowly equal. It only helps if the component is genuinely expensive AND its props are referentially stable — otherwise pair it with useMemo/useCallback or it does nothing.
Get all 75+ React interview questions
This is a small sample. The React Interview Kit has 75+ Q&A, 39 machine-coding problems and a quick-revision sheet — everything to crack your React rounds.
⚡ Get the React Interview Kit → ₹399Frequently asked questions
- How many React questions should I prepare?
- Cover the core areas — rendering, hooks, state, keys, performance and patterns — rather than memorising a fixed count. Understanding the 'why' matters more than volume.
- Are hooks the main focus now?
- Yes. Functional components with hooks are the standard, so hooks (useState, useEffect, useMemo, useCallback, useRef, useReducer) are heavily tested.