How React Virtual DOM Works Under the Hood
🧠 Introduction
Modern web apps need to be fast, smooth, and responsive.
But updating the UI directly using the browser DOM can be slow and inefficient.
👉 This is where React Virtual DOM comes in.
In this blog, we’ll understand:
What problem Virtual DOM solves
How React updates UI step by step
What diffing (reconciliation) means
Why React is fast
❌ Problem: Slow Real DOM Updates
The Real DOM (browser DOM) is:
Heavy ❌
Slow to update ❌
Expensive for frequent changes ❌
Example:
If you update 1000 elements:
Browser may re-render everything 😵
Causes lag & poor performance
⚡ Solution: Virtual DOM
👉 Virtual DOM = Lightweight JavaScript copy of Real DOM
Instead of updating Real DOM directly:
React updates Virtual DOM first
Compares changes
Updates only required parts
⚖️ Real DOM vs Virtual DOM
| Feature | Real DOM | Virtual DOM |
|---|---|---|
| Speed | Slow | Fast |
| Updates | Direct | Optimized |
| Cost | High | Low |
| Control | Browser | React |
🔄 Step-by-Step: How React Updates UI
/
🟢 1. Initial Render
When app loads:
Component → Virtual DOM → Real DOM
Flow:
React creates Virtual DOM tree
Converts it into Real DOM
UI appears on screen
💻 Real Example (Counter App)
Let’s understand this using a simple React app:
📦 React DOM Entry Point
This is how React connects to browser:
main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
🌐 HTML Root File
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
App.jsx
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
<>
<h1>Counter App!</h1>
<h3>Counter: {count}</h3>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<button onClick={() => setCount(count - 1)}>
Decrement
</button>
</>
);
}
export default App;
🔍 Initial Render Flow
App Component
↓
Virtual DOM Tree Created
↓
Converted to Real DOM
↓
Displayed on Screen
Virtual DOM
🔵 2. State Change Trigger
When user clicks button:
setCount(count + 1);
👉 React triggers re-render
🟡 3. New Virtual DOM Tree Created
After state change:
React creates a new Virtual DOM
Updates
countvalue inside it
🟠 4. Diffing (Reconciliation)
React compares:
Old Virtual DOM vs New Virtual DOM
👉 It finds that only this changed:
Counter: 0 → Counter: 1
🟣 5. Minimal Update Found
React identifies:
Only text node changed
Buttons & structure remain same
🔴 6. Real DOM Update
👉 React updates ONLY:
<h3>Counter: 0</h3>
↓
<h3>Counter: 1</h3>
✅ No full re-render
✅ Only minimal update
🔄 Full Lifecycle Flow
1. Initial Render Component → Virtual DOM → Real DOM
2. State Change (Button Click)
↓
3. New Virtual DOM Created
↓
4. Diffing (Old vs New)
↓
5. Minimal Changes Found
↓
6. Real DOM Updated
⚡ Why Virtual DOM is Fast?
✅ Because:
Avoids direct DOM manipulation
Updates only changed parts
Reduces unnecessary re-renders
🧠 Key Concept
👉 React is NOT faster because it replaces DOM
👉 It is faster because it does LESS work
💡 Real-Life Analogy
Imagine editing a book:
❌ Real DOM → Rewrite full page
✅ Virtual DOM → Update only one line
🚀 Final Thoughts
React Virtual DOM works like a smart middle layer:
Tracks changes
Compares efficiently
Updates only what’s needed
👉 That’s why React apps feel fast and smooth
🧾 Summary
Real DOM updates are expensive
Virtual DOM is a lightweight copy
State change creates new Virtual DOM
Diffing compares trees
Only minimal updates applied
Improves performance significantly
📌 Bonus Tip
👉 Focus on understanding flow, not internals
👉 Virtual DOM = Efficiency, not magic
🙌 Acknowledgement
Learning as part of Mobile Development Cohort 🚀
