React Interview Questions and Answers

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.

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.