# How React Virtual DOM works under the Hood

## Imagine a Big Toy Room 🧸

Imagine you have a huge toy room.

You have:

*   Toys on the floor
    
*   Books on shelves
    
*   Cars on the table
    
*   Building blocks everywhere
    

Now imagine every time you want to move **one toy car**, your parents completely rebuild the entire room.

That would be:

*   Slow 😴
    
*   Tiring 😩
    
*   Wasteful 🚮
    

This is exactly the problem websites face when updating the screen.

React solves this problem using something called the **Virtual DOM**.

* * *

# What Problem Does the Virtual DOM Solve?

Web pages are built using something called the **DOM**.

DOM stands for:

> Document Object Model

Think of the DOM like a big tree made of website elements:

*   Buttons
    
*   Text
    
*   Images
    
*   Inputs
    
*   Cards
    
*   Menus
    

Whenever something changes on the screen:

*   Typing in a search box
    
*   Clicking a button
    
*   Adding an item to cart
    
*   Updating a counter
    

The browser must update the DOM.

But changing the **Real DOM** directly is expensive.

* * *

# Why Is the Real DOM Slow?

The browser must do lots of work whenever the DOM changes.

It may need to:

1.  Recalculate layouts
    
2.  Repaint pixels
    
3.  Rearrange elements
    
4.  Recompute styles
    
5.  Re-render parts of the page
    

Even a tiny update can become costly if done too often.

Imagine changing one LEGO block but rebuilding the whole castle every time.

That is inefficient.

* * *

# Real DOM vs Virtual DOM

| Real DOM | Virtual DOM |
| --- | --- |
| Actual webpage inside browser | Lightweight copy inside JavaScript |
| Slow to update frequently | Fast to create and compare |
| Browser controls it | React controls it |
| Expensive operations | Cheap operations |
| Causes repaint and layout work | Just JavaScript objects |

* * *

# Think of Virtual DOM Like a Blueprint 📘

The Virtual DOM is:

*   Not the real webpage
    
*   Not visible directly
    
*   Just a lightweight JavaScript representation
    

React creates a copy of the UI in memory.

Instead of touching the real screen immediately, React first works with this lightweight copy.

That makes updates much faster.

* * *

# Initial Render Process in React

Let us understand what happens when React shows a component for the first time.

Suppose we have this component:

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

* * *

# Step-by-Step Initial Render Flow

## Step 1 — React Creates Virtual DOM

React converts the component into a Virtual DOM object.

Something like this internally:

```js
{
  type: 'h1',
  props: {
    children: 'Hello React'
  }
}
```

This is just a JavaScript object.

Very lightweight.

* * *

## Step 2 — React Builds Real DOM

React now converts the Virtual DOM into actual browser elements.

The browser creates:

```html
<h1>Hello React</h1>
```

Now the user sees the content on the screen.

* * *

# Initial Render Diagram

```text
React Component
       ↓
Virtual DOM Created
       ↓
React Converts It
       ↓
Real DOM Updated
       ↓
Screen Displays UI
```

* * *

# What Happens When State Changes?

Now comes the most important part.

Suppose we have a counter:

```jsx
function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  )
}
```

When the button is clicked:

```js
setCount(count + 1)
```

React does NOT directly change the Real DOM immediately.

Instead, React starts a smart update process.

* * *

# How State or Props Trigger Re-render

Whenever:

*   State changes
    
*   Props change
    

React re-renders the component.

Re-render does NOT mean rebuilding the whole webpage.

It means:

> React creates a NEW Virtual DOM tree.

* * *

# Creation of a New Virtual DOM Tree

Suppose the counter changes from:

```text
0
```

to:

```text
1
```

React creates:

## Old Virtual DOM

```text
<h1>0</h1>
```

## New Virtual DOM

```text
<h1>1</h1>
```

Now React compares both trees.

This comparison process is called:

# Reconciliation (Diffing)

* * *

# What Is Diffing?

Diffing means:

> Comparing the old Virtual DOM with the new Virtual DOM.

React checks:

*   What changed?
    
*   What stayed same?
    
*   What needs updating?
    

This process is extremely fast because Virtual DOM objects are just JavaScript objects.

* * *

# Diffing Diagram

```text
Old Virtual DOM           New Virtual DOM

<h1>0</h1>         VS      <h1>1</h1>

        ↓ React Compares ↓

Only text changed
```

* * *

# How React Finds Minimal Changes

React is smart.

It does not replace everything.

It only updates the exact parts that changed.

In our example:

✅ The button stayed same

✅ The div stayed same

✅ Only the text inside h1 changed

So React updates ONLY that text.

* * *

# Updating Only Changed Nodes in the Real DOM

Instead of rebuilding the whole page:

❌ Remove everything

❌ Recreate everything

React does:

✅ Update only changed node

So only this changes:

```html
<h1>0</h1>
```

becomes:

```html
<h1>1</h1>
```

Everything else stays untouched.

* * *

# Minimal Patch Update Diagram

```text
Before Update

<div>
  <h1>0</h1>
  <button>Increase</button>
</div>

                ↓

React Updates ONLY:

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

                ↓

After Update

<div>
  <h1>1</h1>
  <button>Increase</button>
</div>
```

* * *

# Why This Improves Performance

Direct DOM updates are expensive.

React avoids unnecessary DOM operations.

Benefits:

*   Faster updates ⚡
    
*   Smoother UI 🎨
    
*   Better user experience 😊
    
*   Less browser work 🧠
    
*   Efficient rendering 🚀
    

React performs most work inside JavaScript first.

Then it updates only necessary parts in the browser.

That is why React apps feel fast.

* * *

# Real DOM vs Virtual DOM Example

Imagine a restaurant.

## Real DOM Approach

Customer changes one food item.

Chef throws away the whole meal and cooks everything again.

Very slow.

* * *

## Virtual DOM Approach

Chef changes only the requested item.

Everything else stays same.

Much faster.

* * *

# React Reconciliation Explained Simply

Reconciliation is React's smart comparison process.

It answers:

*   Which elements changed?
    
*   Which elements are new?
    
*   Which elements were removed?
    

React compares:

```text
Old Virtual DOM Tree
        VS
New Virtual DOM Tree
```

Then it creates the smallest possible update.

This update is called a:

> Patch

The patch is finally applied to the Real DOM.

* * *

# Tree Comparison Example

## Old Tree

```text
App
 └── div
      ├── h1 "Hello"
      └── button
```

## New Tree

```text
App
 └── div
      ├── h1 "Hello React"
      └── button
```

React sees:

*   div is same
    
*   button is same
    
*   only h1 text changed
    

So only h1 text updates.

* * *

# High-Level React Update Flow

Now let us understand the entire React lifecycle.

* * *

# React Render → Diff → Commit Flow

## 1\. Render Phase

React creates a new Virtual DOM tree.

```text
Component Function Runs
          ↓
New Virtual DOM Created
```

* * *

## 2\. Diff Phase (Reconciliation)

React compares:

```text
Old Virtual DOM
       VS
New Virtual DOM
```

React finds differences.

* * *

## 3\. Commit Phase

React applies only necessary updates to the Real DOM.

```text
Minimal Changes Applied
          ↓
Browser Updates Screen
```

* * *

# Full Lifecycle Diagram

```text
User Action
    ↓
State / Props Change
    ↓
Component Re-renders
    ↓
New Virtual DOM Created
    ↓
React Diffing Happens
    ↓
Minimal Changes Found
    ↓
Real DOM Updated
    ↓
UI Updates on Screen
```

* * *

# Important Thing to Remember

React does NOT magically make DOM fast.

The Real DOM is still expensive.

What React does is:

✅ Reduce unnecessary DOM operations

✅ Batch updates smartly

✅ Update only changed parts

That is the real power of the Virtual DOM.

* * *

# Does React Always Use Virtual DOM?

Yes.

Whenever components render:

*   React creates Virtual DOM trees
    
*   React compares them
    
*   React updates only necessary parts
    

This happens very quickly behind the scenes.

* * *

# Common Beginner Misunderstanding

Many people think:

> “React updates the whole page every time.”

That is NOT true.

React mostly updates only changed parts.

That is why React applications scale well.

* * *

# Tiny Mental Model to Remember 🧠

You can remember React Virtual DOM like this:

```text
Create Copy
     ↓
Compare Copies
     ↓
Find Difference
     ↓
Update Only Difference
```

That is the heart of React.

* * *

# Simple Analogy for Kids 🍎

Imagine two drawings.

Old Drawing:

🍎🍌🍇

New Drawing:

🍎🍌🍉

React compares both drawings.

It notices:

Only the last fruit changed.

So instead of redrawing everything, React changes only:

🍇 → 🍉

That is exactly how Virtual DOM works.

* * *

# Final Summary

React uses the Virtual DOM to make UI updates faster and smarter.

The process works like this:

1.  React creates a Virtual DOM
    
2.  UI is rendered to the Real DOM
    
3.  State or props change
    
4.  React creates a NEW Virtual DOM
    
5.  React compares old and new trees
    
6.  React finds minimal differences
    
7.  Only changed parts update in the Real DOM
    

This makes React applications:

*   Fast
    
*   Efficient
    
*   Smooth
    
*   Scalable
    

* * *

# One-Line Definition

> React Virtual DOM is a lightweight JavaScript copy of the UI that helps React update only the changed parts of the Real DOM efficiently.

* * *

# Quick Revision Cheat Sheet

| Concept | Simple Meaning |
| --- | --- |
| Real DOM | Actual webpage |
| Virtual DOM | Lightweight JS copy |
| Re-render | Create new Virtual DOM |
| Diffing | Compare old vs new tree |
| Reconciliation | React update process |
| Patch | Minimal required update |
| Commit | Apply changes to Real DOM |

* * *

# Closing Thought

The Virtual DOM is not magic.

It is simply React being smart about:

> “What actually changed?”

Instead of rebuilding everything, React updates only what is necessary.

That tiny idea is what makes modern React apps feel incredibly fast. 🚀