What is reconciliation?

ReactMiddle~2 min read

Definition

Reconciliation is the process of comparing the old and new Virtual DOM tree, during which React determines exactly which changes need to be made to the real DOM so that the interface matches the current state of the data.

How it works (step by step)

You change the state (state or props):

javascript

setCount(count + 1);

React triggers a re-render of the component -> a new Virtual DOM tree is created.
React compares the new and old Virtual DOM tree:

If the node is of the same type (<div> -> <div>), it keeps the DOM element and updates only the changed attributes.
If the type has changed (<div> -> <span>), React removes the old node and creates a new one.
If the order of elements has changed (for example, in a list), React uses keys (key) to figure out which element moved and which was added or removed.

After comparison, React applies the minimal changes to the real DOM.

Example

Before:

javascript

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

After:

javascript

<ul>
  <li>A</li>
  <li>C</li>
  <li>D</li>
</ul>

React does:

Compares both Virtual DOM trees.
Sees that:

A stayed in place
B disappeared
C moved up
D was added

Updates only the necessary parts of the DOM, without a full repaint.

Reconciliation algorithm

React uses an optimized "diffing algorithm" based on several heuristics:

Different element types -> node re-render

javascript

<div> -> <span> // fully replaced

Same types -> property update

javascript

<button disabled={false}> -> <button disabled={true}>
// React will just change the attribute

Lists and key A key helps React tell elements apart between renders:

javascript

{items.map(item => <li key={item.id}>{item.text}</li>)}

Without key, React may mistakenly remove and recreate elements, losing focus, animations, and state.

Why reconciliation is needed

Without this process React would not know exactly what needs to change, and would simply repaint the whole tree again -> slow and inefficient.

With reconciliation, React:

works fast (minimum changes to the DOM),
stays declarative (you describe "what", without thinking about "how"),
preserves the state of components across partial updates.

Visual analogy

Imagine React as a text editor:

You have an old version of the document (old Virtual DOM);
You make edits (new Virtual DOM);
React compares the two versions and applies only the differences, instead of retyping the whole text.

Summary

Term	What it means
Virtual DOM	A copy of the real DOM in memory
Diffing	Comparison of the old and new Virtual DOM
Reconciliation	Applying the difference to the real DOM
Key	A hint to React about which element corresponds to which during comparison

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.