Reconciliation and the Virtual DOM — how does React decide what to update?
React renders an in-memory tree, diffs it against the previous one with O(n) heuristics (same type = update props; different type = replace; keys identify list items), then commits the minimal DOM mutations.
The Virtual DOM is a lightweight tree of plain JS objects describing what the UI should look like. Reconciliation is the algorithm React runs to compare the new tree to the previous one and produce the minimal set of real DOM mutations.
Two heuristics keep the diff O(n) instead of O(n³):
- Different element types ⇒ rebuild.
<div>→<span>throws away the old subtree and mounts new. - Same type ⇒ patch in place. Update changed props/attributes; recurse into children.
For lists, React aligns children by key. Without keys (or with index keys when items reorder), React diffs positionally — destroying and recreating components, losing state and forcing remounts. Stable, unique keys (usually a record id) let React match nodes across reorders.
Since React 16, this work runs on Fiber: the diff is interruptible and can be split across frames so a long render doesn't jank the UI. The "render phase" produces a work tree; the "commit phase" applies all DOM mutations synchronously in one pass.
Code
Follow-up questions
- •What does Fiber add over the old stack reconciler?
- •Why are array indexes a bad key when items can be reordered or filtered?
- •How does React decide whether to bail out of re-rendering a subtree?
Common mistakes
- •Using array index as key for dynamic, reorderable lists.
- •Wrapping content in an extra `div` only on one branch — flips the element type and re-mounts.
- •Believing the Virtual DOM is faster than direct DOM — it's a programming model, not raw speed.
Performance considerations
- •Stable keys avoid unnecessary unmount/remount, preserving DOM nodes, focus, and child component state.
- •`React.memo` + reference-stable props lets the diff bail out at a subtree boundary.
Edge cases
- •Conditional `null` children change the children array shape — keys help here too.
- •Portals reconcile within their host parent but live in a different DOM subtree.
Real-world examples
- •Drag-and-drop lists rely on stable keys so the dragged row keeps its DOM node and animation through the diff.