# 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
    

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

Internally becomes something like:

```js
{
  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:

```jsx
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

```jsx
<h1>0</h1> → <h1>1</h1>
```

👉 Only text changes

* * *

### 2\. Different type → replace element

```jsx
<h1>Hi</h1> → <p>Hi</p>
```

👉 Replace entire node

* * *

### 3\. Lists → use keys for efficiency

```jsx
<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.