How React Reconciles a Render
When state or props change, how does React reconcile the previous and next element trees? Explain how it decides whether to preserve component state and what it updates in the real DOM.
what they're testing: The interviewer is probing whether you can reason about rendering, component identity, state lifetime, and DOM work as one connected process.
A state update queues a render, while new props are evaluated when the parent renders. React calls the relevant components to work out the next UI and compares that result with the previous one. This is a calculation; changes to the existing browser DOM wait for the commit phase.
State survives when React can match the same component type at the same position in the UI tree. Within a parent, a stable key lets React match a particular sibling even when the order changes. A different type or key creates a different identity, and removing a component destroys its state. This is why list indexes are risky when items can move, and random keys are worse because they force a new identity on every render.
During commit, React applies the DOM changes needed to match the latest output. A matching DOM element can be kept while changed properties or text are updated; other nodes may be inserted, removed, or reordered. Rendering a component does not mean rebuilding the page, and it may produce no DOM change at all.
Why it lands
- Separates render-time calculation from commit-time DOM mutation.
- Connects type, position, and keys directly to state lifetime.
- Explains DOM reuse without claiming every render changes the DOM.
- Calls out the practical failure mode of unstable keys.
Where people slip
- Saying React compares HTML snapshots or scans the real DOM for changes.
- Claiming any prop change remounts the component and resets its state.
- Treating keys as a performance hint instead of part of sibling identity.
- Saying a re-render rebuilds the entire browser DOM.
If they push further
What exactly makes React reset a component's state?
State resets when React can no longer match the same component identity at that position, such as after a type or key change. Removing the component also destroys its state, so a later replacement starts fresh.
Why are array indexes risky as keys?
An index identifies a slot rather than the data item in it. After an insertion, deletion, or reorder, React can associate existing component state with the wrong record.
Does every component render cause a DOM update?
No. Rendering calculates the next output, and the commit phase changes the DOM only where it needs to make the page match that output.
Sources
- React: Render and Commit ↗react.dev
- React: Preserving and Resetting State ↗react.dev
- React: Rendering Lists ↗react.dev
Now answer it yourself.
Reading a strong answer is easy. Producing one under pressure is the skill the interview tests. Gapmap grades your answer against the same bar an interviewer would.
beta
The interviewer part is in the works.
The diagnostic, personal maps, and AI mock interviews are being finished right now. The notes stay free either way. Leave an email and you'll get the first-cohort invite, plus a month of Pro when it opens.