How React Virtual DOM Works Under the Hood

When you first hear about React, one term shows up everywhere — Virtual DOM. It’s often credited for React’s performance, but what does it actually do?

Let’s break it down step by step — no hype, just the real mental model.

The Problem: Slow DOM Manipulation

The Real DOM (what the browser uses to render UI) is not cheap to update.

Every time you:

• Change text

• Add/remove elements

• Modify styles

…the browser may:

• Recalculate layout (reflow)

• Repaint pixels

This becomes expensive when updates happen frequently (like typing, animations, or dynamic UI).

👉 Directly manipulating the DOM repeatedly = performance bottleneck

Real DOM vs Virtual DOM

Real DOM

• Actual browser representation

• Heavy operations (layout + paint)

• Updates are slow if done frequently

Virtual DOM

• Lightweight JavaScript object

• Represents UI structure in memory

• Fast to create and compare

👉 Think of it like this:

Real DOM = actual building Virtual DOM = blueprint of the building

React works mostly with the blueprint, not the building.

Step 1: Initial Render in React

When your app loads:

1. React creates a Virtual DOM tree

2. It converts that into actual DOM elements

3. Inserts them into the browser

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

Internally becomes something like:

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

Then React renders this to the Real DOM.

Step 2: What Happens When State or Props Change?

Whenever:

• setState() is called

• or props change

React does NOT directly update the DOM

Instead:

👉 It creates a new Virtual DOM tree

Step 3: New Virtual DOM Tree Creation

React re-runs your component:

function App() {
  const [count, setCount] = useState(0);
  return <h1>{count}</h1>;
}

If count changes:

• Old Virtual DOM → <h1>0</h1>

• New Virtual DOM → <h1>1</h1>

Now React has:

• Previous tree

• New tree

Step 4: What is Diffing (Reconciliation)?

This is where the magic happens.

Reconciliation = comparing old and new Virtual DOM trees

React checks:

• What changed?

• What stayed the same?

Instead of replacing everything, it finds the minimum required updates.

Step 5: Finding Minimal Changes

React uses smart rules:

1. Same type → update only content

<h1>0</h1> → <h1>1</h1>

👉 Only text changes

---

2. Different type → replace element

<h1>Hi</h1> → <p>Hi</p>

👉 Replace entire node

---

3. Lists → use keys for efficiency

<li key="1">A</li>
<li key="2">B</li>

👉 Keys help React track elements efficiently

Step 6: Updating Only Changed Nodes

After diffing:

React updates only the parts that changed in the Real DOM.

Instead of: ❌ Rebuilding entire UI It does: ✅ Targeted updates

Why This Improves Performance

Because React avoids unnecessary DOM operations:

• Fewer reflows

• Fewer repaints

• Faster UI updates

👉 Key idea:

“Calculate changes in memory first, then apply minimal updates to the real DOM.”

React Flow: Render → Diff → Commit

Here’s the full lifecycle:

1. Render Phase

• Create Virtual DOM tree

2. Diff Phase (Reconciliation)

• Compare old vs new tree

• Identify changes

3. Commit Phase

• Apply minimal updates to Real DOM

Final Mental Model

Think of React like a smart editor:

1. Writes a new version of your UI (Virtual DOM)

2. Compares it with the previous version

3. Applies only the differences

Conclusion

The Virtual DOM is not about replacing the DOM — it’s about optimizing how updates happen.

By:

• Avoiding direct frequent DOM manipulation

• Using a lightweight representation

• Applying minimal updates

React achieves efficient UI rendering at scale

One-Line Summary

React uses a Virtual DOM to compare UI changes in memory and update only what’s necessary in the real DOM, making apps fast and efficient.