What is Reconciliation in React?
Understand React reconciliation: how the diffing algorithm compares Virtual DOM trees, why keys matter, and how minimal DOM updates keep your UI fast.
Expected Interview Answer
Reconciliation is the process React uses to compare a newly rendered Virtual DOM tree with the previous one and determine the minimal set of real DOM updates needed to bring the UI in sync with the new state.
React's diffing algorithm is heuristic and runs in roughly O(n). It assumes elements of different types produce different trees, so it replaces rather than diffs them, and it uses the key prop to match children across renders. When keys are stable, React reuses existing DOM nodes and component state instead of destroying and recreating them, which keeps rendering fast and correct.
- Updates only what actually changed
- Keeps rendering near-linear in cost
- Preserves component state across re-renders
- Enables the declarative UI model
- Uses keys to efficiently match list items
AI Mentor Explanation
Think of a match referee comparing the team sheet submitted before the game with the one for the next innings. Instead of re-verifying all eleven players, the referee spots only the substitutions by their squad numbers and updates just those entries, keeping the official record accurate with the least amount of checking.
Step-by-Step Explanation
Step 1
Render new tree
A state or prop change produces a fresh Virtual DOM tree from your components.
Step 2
Compare element types
React checks each node's type; different types cause a full replace of that subtree.
Step 3
Match children by key
For lists, React uses the key prop to pair old and new children instead of comparing by index.
Step 4
Reuse or recreate
Matched nodes keep their DOM and state; unmatched ones are created or removed.
Step 5
Commit changes
React applies the computed minimal set of real DOM mutations.
What Interviewer Expects
- Definition of reconciliation as tree diffing
- Knowledge of the O(n) heuristic assumptions
- The role of the key prop in matching children
- Understanding that same-type nodes are updated, not recreated
- How reconciliation preserves component state
Common Mistakes
- Confusing reconciliation with rendering to the screen
- Using array index as a key in dynamic lists
- Thinking React deep-compares every node without heuristics
- Assuming different element types are diffed instead of replaced
Best Answer (HR Friendly)
“Reconciliation is how React figures out what changed between the old screen and the new one. It compares the two versions, reuses the parts that are the same, and updates only the parts that differ, which keeps the app fast.”
Code Example
function TodoList({ todos }) {
// Stable ids as keys let React match items across renders,
// reusing DOM nodes instead of recreating the whole list.
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
)
}Follow-up Questions
- Why is using the array index as a key problematic?
- What heuristics does React's diffing algorithm rely on?
- How does reconciliation preserve component state across renders?
- What happens when an element's type changes between renders?
- How does the Fiber architecture relate to reconciliation?
MCQ Practice
1. What does reconciliation do in React?
Reconciliation compares the new and previous Virtual DOM trees to compute the minimal real DOM changes.
2. What does React use to match list children across renders?
Stable key props let React pair old and new list items so it can reuse DOM nodes and state.
3. When two elements have different types during diffing, React will:
React assumes different types yield different trees, so it replaces the entire subtree rather than diffing it.
Flash Cards
What is reconciliation? — React's process of diffing the new Virtual DOM tree against the old one to apply minimal real DOM updates.
Why do keys matter in reconciliation? — Keys let React match children across renders, reusing DOM nodes and preserving state instead of recreating them.
What happens when element type changes? — React tears down the old subtree and builds a fresh one rather than diffing.
What is the diffing complexity? — React uses heuristics to keep reconciliation roughly O(n) instead of a costly O(n^3) tree comparison.