How Does React's Virtual DOM Reconciliation Engine Work?

One of the most frequently asked senior-level React interview questions is:

How does React update the UI efficiently without re-rendering the entire DOM?

To answer this, you need to understand:

Virtual DOM
Reconciliation
Diffing Algorithm
Fiber Architecture
Keys
Render and Commit Phases

1. What Problem Is React Solving?

Direct DOM manipulation is expensive.

Imagine updating a list with thousands of elements:

document.getElementById("root").appendChild(newElement);

Every DOM operation can trigger:

Layout calculations
Style recalculations
Repaints
Reflows

These operations become costly as applications grow.

React solves this by introducing a layer between your code and the browser DOM.

2. What Is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight JavaScript representation of the Real DOM.

Instead of directly modifying the browser DOM, React first creates objects describing the UI.

Example:

<h1>Hello World</h1>

becomes something conceptually similar to:

{
  type: "h1",
  props: {
    children: "Hello World"
  }
}

React keeps this representation in memory.

Virtual DOM vs Real DOM

Virtual DOM	Real DOM
JavaScript Object	Browser API
Lightweight	Heavy
Fast to create	Expensive to update
Lives in memory	Lives in browser
Diffed efficiently	Causes layout/repaint work

The Virtual DOM itself is not what makes React fast.

The real advantage comes from React's ability to determine the minimum number of DOM updates required.

3. What Is Reconciliation?

Reconciliation is the process React uses to determine:

What changed between the previous UI and the next UI?

React compares:

Old Virtual DOM
       VS
New Virtual DOM

and calculates the smallest set of updates needed.

This process is called:

Diffing

Rendering Flow

When state changes:

setCount(count + 1);

React performs:

State Update
      ↓
Create New Virtual DOM
      ↓
Compare With Old Virtual DOM
      ↓
Find Differences
      ↓
Update Real DOM

This entire comparison process is reconciliation.

Example: Text Update

Initial render:

<h1>Hello</h1>

Virtual DOM:

{
  type: "h1",
  children: "Hello"
}

After update:

<h1>Hello React</h1>

New Virtual DOM:

{
  type: "h1",
  children: "Hello React"
}

React notices:

Node type unchanged
Text changed

Only text content is updated.

React does NOT replace the entire <h1>.

4. React's Diffing Algorithm & Rules

Comparing two entire trees recursively would be expensive.

A perfect tree comparison would be:

O(n³)

For 1000 nodes:

1,000,000,000 comparisons

Too slow.

React uses heuristics to achieve approximately:

O(n)

performance.

React's Two Core Assumptions

Assumption 1

Different element types produce different trees.

<div />

changes to:

<span />

React assumes:

Entire subtree changed

and recreates it.

Assumption 2

Developers provide stable keys.

items.map((item) => <User key={item.id} />);

Keys help React identify which items changed.

Element Type Change Example

Before:

<div>
  <Counter />
</div>

After:

<section>
  <Counter />
</section>

React sees:

div → section

Result:

Destroy old tree
Create new tree

All child state is lost.

Same Element Type Example

Before:

<button className="primary">Save</button>

After:

<button className="secondary">Save</button>

React sees:

button → button

Only updates:

className

The DOM node is reused.

5. Sibling Reconciliation: Why Keys Matter

Consider:

["A", "B", "C"];

Updated list:

["D", "A", "B", "C"];

Without keys React may think:

A changed to D
B changed to A
C changed to B

Multiple unnecessary updates occur.

With Keys

[
  { id: 1, name: "A" },
  { id: 2, name: "B" },
  { id: 3, name: "C" },
];

users.map((user) => <Row key={user.id} />);

React understands:

New item inserted
Existing items preserved

Far fewer DOM operations occur.

Why Index as Key Is Dangerous

Bad:

items.map((item, index) => <Item key={index} />);

If items are reordered:

State may move to wrong components

Common bugs:

Wrong input values
Incorrect animations
Lost component state

Preferred:

key={item.id}

What Happens Internally?

Suppose:

function App() {
  return <h1>Hello</h1>;
}

React builds a tree:

App
 ↓
h1
 ↓
Hello

When state changes:

setState(...)

React builds a new tree.

Old Tree
       VS
New Tree

Differences are recorded.

These differences are called:

Effects

6. Under the Hood: React Fiber Architecture

Before React 16:

Stack Reconciler

Rendering was synchronous.

Problem:

Large updates blocked UI

Users experienced:

Lag
Janky scrolling
Frozen interactions

React Fiber

React 16 introduced:

Fiber Architecture

Fiber is React's reconciliation engine.

Every component becomes a Fiber node.

Example:

<App>
  <Navbar />
  <Products />
</App>

Fiber tree:

App
├── Navbar
└── Products

Each node stores:

Component type
Props
State
Parent
Child
Sibling
Pending work

Why Fiber Is Important

Fiber allows React to:

Pause work
Resume work
Prioritize work
Cancel work
Reuse work

This enables:

Concurrent Rendering
Suspense
Transitions
Better responsiveness

Render Phase vs Commit Phase

React updates occur in two phases.

1. Render Phase

React:

Builds Fiber Tree
Calculates changes
Performs reconciliation

No DOM updates yet.

Can be interrupted.

2. Commit Phase

React:

Updates DOM
Runs useLayoutEffect
Runs refs

Cannot be interrupted.

Example Timeline

setState
   ↓
Render Phase
   ↓
Diffing
   ↓
Create Effects
   ↓
Commit Phase
   ↓
Update DOM

7. How React Avoids Unnecessary Work

A common misconception:

React only re-renders changed components.

Not exactly.

When a parent renders:

<App>
  <Child />
</App>

the child function usually runs again.

App render
 ↓
Child render

However:

Render ≠ DOM Update

React may render many components but update only a few DOM nodes.

How React Avoids Unnecessary Work

React.memo

const UserCard = React.memo(function UserCard() {
  return <div>User</div>;
});

Skips re-render if props don't change.

useMemo

const result = useMemo(() => {
  return expensiveCalculation();
}, [data]);

Caches expensive calculations.

useCallback

const handleClick = useCallback(() => {
  saveData();
}, []);

Preserves function references.

8. Common Interview Q&A

Why Is React's Diffing O(n)?

Because React assumes:

Different element types create different trees.
Keys identify stable child elements.

These assumptions eliminate expensive tree comparisons.

Does React Compare the Real DOM?

No.