What Is Reconciliation in React?
Understand React reconciliation: how the diffing algorithm compares element trees, uses keys, and computes minimal DOM updates for fast renders.
Expected Interview Answer
Reconciliation is the algorithm React uses to compare a newly rendered virtual DOM tree against the previous one and compute the minimal set of real DOM mutations needed to make the UI match, instead of rebuilding the whole page.
Whenever state or props change, React calls your components again to produce a new element tree, then diffs it against the previous tree using heuristics: elements of different types are torn down and rebuilt, same-type elements are updated in place by comparing changed attributes, and lists are matched using the `key` prop rather than position. This keeps diffing close to linear time instead of the cubic cost of a naive tree-diff algorithm, and it is what lets React batch and schedule DOM writes efficiently through the Fiber architecture.
- Avoids expensive full-page DOM rebuilds
- Keeps diffing close to O(n) via heuristics
- Preserves component state across re-renders
- Enables scheduling and interruption via Fiber
- Makes declarative UI updates performant
AI Mentor Explanation
Reconciliation is like a scorer comparing this over's sheet against the last one instead of rewriting the entire scorecard from ball one. Only the deltas get updated in ink, while unchanged entries stay untouched, and each batter's unique cap number, like a key, stops the scorer from crediting runs to the wrong player when the order is reshuffled.
Step-by-Step Explanation
Step 1
Render phase produces a new tree
State or prop changes trigger your components to run again, producing a fresh tree of React elements describing the desired UI.
Step 2
Diff against the previous tree
React compares the new element tree with the one from the last commit, node by node, using type and position as the first signals.
Step 3
Type mismatches trigger full replace
If an element's type changes (e.g. a div becomes a span), React tears down the old subtree and mounts a brand-new one instead of patching it.
Step 4
Keys identify list items
For arrays of children, React uses the `key` prop to match items across renders so reordering, inserting, or removing does not reset unrelated state.
Step 5
Commit phase applies the diff
Once the minimal set of changes is computed, Fiber commits them to the real DOM in a single batched pass, and lifecycle/effect hooks fire.
What Interviewer Expects
- Explains reconciliation as diffing old vs new element trees
- Mentions the type-then-key heuristics React uses
- Understands why keys matter for list stability
- Connects reconciliation to the Fiber architecture and scheduling
- Knows it avoids full DOM rebuilds for performance
Common Mistakes
- Confusing reconciliation with the virtual DOM itself
- Using array index as key for dynamic lists
- Believing React diffs the real DOM directly instead of element trees
- Assuming reconciliation always re-renders every child component
Best Answer (HR Friendly)
“Reconciliation is the process React uses behind the scenes to figure out exactly what changed on a page after data updates, so it can update only those parts instead of redrawing everything. This keeps apps fast and smooth even as they get more complex.”
Code Example
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
// Stable key lets React match items across renders
// instead of re-mounting every <li> when the order changes
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}
// Without a stable key, reordering `todos` would make React
// tear down and rebuild list items instead of just moving them.Follow-up Questions
- Why is using an array index as a key considered an anti-pattern?
- How does the Fiber architecture change reconciliation from React 15?
- What happens during reconciliation when an element's type changes?
- How do keys affect component state during a re-render?
- What is the difference between reconciliation and the commit phase?
MCQ Practice
1. What is the primary purpose of reconciliation in React?
Reconciliation diffs the new element tree against the previous one to compute the smallest set of real DOM updates needed.
2. What does React do when an element's type changes between renders?
A type change means React cannot safely reuse the existing instance, so it unmounts the old subtree and mounts a fresh one.
3. Why does React recommend stable, unique keys for list items?
Stable keys let React identify which items moved, were added, or removed, preventing incorrect state reuse across re-renders.
Flash Cards
What is reconciliation in React? — The algorithm that diffs the new element tree against the previous one to compute minimal real DOM updates.
What heuristic does React use first when diffing? — Element type: different types trigger a full teardown and remount instead of an in-place patch.
Why avoid array index as a key? — Index-based keys shift when the list reorders, causing React to misattribute state to the wrong item.
What architecture enables interruptible reconciliation? — Fiber, introduced in React 16, which breaks rendering work into units that can be paused and resumed.