Core concepts
Virtual DOM, Fiber & reconciliation
How React diffs, the Fiber architecture, and render bailouts.
React builds an in-memory tree of elements (the virtual DOM) and, on each render, diffs the new tree against the previous to compute the minimal real-DOM mutations — reconciliation.
Reconciliation edits a paper draft first and copies only the red-pen changes to the final document; Fiber lets the editor pause mid-page to handle something urgent.
Key concepts
1
The diff uses heuristics: different element types replace the subtree; same type updates props; lists match by key. This is O(n) instead of a full tree comparison.
typeskey
2
Fiber is the reconciler that makes work interruptible — React can pause, prioritise and resume rendering (the basis of concurrent features and useTransition), keeping the UI responsive during heavy updates.
FiberinterruptibleuseTransition
3
Bailouts: if state is unchanged (Object.is) or a memoized component gets equal props, React skips re-rendering that subtree. Interview angle: "why does changing element type remount children?" — the diff treats a new type as a new subtree, discarding old state.
Bailouts:Interview angle:Object.is
jsx
// Same type → React updates in place (state preserved)
{editing ? <input value={v} /> : <input value={v} readOnly />}
// Different type → remount (state lost). Avoid switching wrappers:
{cond ? <div><Panel/></div> : <section><Panel/></section>} // Panel remounts