Interview Answer
Reconciliation is React’s process of comparing the previous Virtual DOM with the new Virtual DOM after a state or prop change. React uses a diffing algorithm to identify what has changed and updates only those parts in the real DOM. This minimizes DOM operations, improves performance, and provides a faster user experience. Keys play an important role in reconciliation when rendering lists.
Reconciliation is the process React uses to determine what changed in the UI and update only the necessary parts of the DOM.
Instead of rebuilding the entire page whenever state or props change, React compares the old UI with the new UI and updates only the differences.
Why Do We Need Reconciliation?
Imagine a component:
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>Counter</h1>
<p>{count}</p>
</>
);
}
When count changes from 0 to 1:
Without Reconciliation
Remove entire DOM
↓
Create entire DOM again
↓
Render everything
This would be slow.
With Reconciliation
Old DOM
<h1>Counter</h1>
<p>0</p>
New DOM
<h1>Counter</h1>
<p>1</p>
React notices only the <p> value changed.
It updates only:
<p>1</p>
The <h1> remains untouched.
How React Performs Reconciliation
Step 1: State Changes
setCount(1);
Step 2: Component Re-renders
React creates a new Virtual DOM tree.
Step 3: Compare Trees
Old Virtual DOM
↓
New Virtual DOM
React compares them.
This comparison is called Diffing.
Step 4: Update Real DOM
Only the changed nodes are updated.
Virtual DOM Example
Old Virtual DOM
<div>
<h1>Welcome</h1>
<p>0</p>
</div>
New Virtual DOM
<div>
<h1>Welcome</h1>
<p>1</p>
</div>
React detects:
h1 → Same
p → Changed
Only <p> is updated.
Reconciliation Rules
1. Different Element Type
Old:
<h1>Hello</h1>
New:
<div>Hello</div>
React destroys the old node and creates a new one.
2. Same Element Type
Old:
<p>Welcome</p>
New:
<p>Hello</p>
React updates only the text.
3. Component Updates
<User name="Raj" />
Changes to:
<User name="Amit" />
React re-renders only that component.
Importance of key in Reconciliation
Consider:
{
users.map(user => (
<li>{user.name}</li>
));
}
React cannot efficiently track items.
Correct
{
users.map(user => (
<li key={user.id}>
{user.name}
</li>
));
}
The key helps React identify:
Added Items
Removed Items
Moved Items
Updated Items
More efficient reconciliation.
Example
Before
[
{ id: 1, name: "Raj" },
{ id: 2, name: "Amit" }
]
After
[
{ id: 1, name: "Raj" },
{ id: 2, name: "Amit" },
{ id: 3, name: "John" }
]
React sees:
id 1 → Same
id 2 → Same
id 3 → New
Only the new row is added.
Reconciliation vs Virtual DOM
Many interviewers ask this.
| Virtual DOM | Reconciliation |
|---|---|
| In-memory representation of UI | Process of comparing old and new Virtual DOM |
| Data structure | Algorithm/process |
| Stores UI state | Finds changes and updates DOM |
Flow
State Change
↓
New Virtual DOM Created
↓
Reconciliation (Diffing)
↓
Real DOM Updated
Interview Answer
Reconciliation is React’s process of comparing the previous Virtual DOM with the new Virtual DOM after a state or prop change. React uses a diffing algorithm to identify what has changed and updates only those parts in the real DOM. This minimizes DOM operations, improves performance, and provides a faster user experience. Keys play an important role in reconciliation when rendering lists.
