Virtual DOM

Modern web application demand high performance, smooth UI updates, and responsive user experiences. But directly manipulating the browser's Real DOM is slow and expensive.

To solve this, React introduced the Virtual DOM one of the most important innovations in frontend engineering.

---

What is the DOM

Before understand virtual Dom, we must understand Dom (Document Object Model).

The DOM is a structured representation of HTML elements as a tree of objects inside the browser

<body>
  <h1>Hello</h1>
</body>

DOM Tree:

Document
 └── body
      └── h1
           └── "Hello"

JavaScript interacts with the DOM like:

document.querySelector("h1").textContent = "Hi";

But here is the problem, Updating DOM directly is slow because.

• It triggers flow

• It triggers repaint

• Browser recalculates layout

• Rendering pipeline restarts

---

What is Virtual DOM?

Think of the Virtual DOM as a lightweight copy of the real webpage structure (Real DOM) that exists in memory (inside JavaScript), not on the actual screen.

Instead of updating the real page directly every time something changes, frameworks like React first update this copy (Virtual DOM), compare it with the previous version, and then update only the necessary parts of the real page. This makes apps fast and efficient.

This Process is called Reconciliation

Example:

Imagine : Real DOM = Your notebook
Virtual DOM = Rough notes(Draft copy)
Without virtual DOM
He rewrites the entire notebook every time he makes a small mistake.
With Virtual DOM
He first edits in the rough notebook -> checks changes -> updates only corrected line in the final notebook .

That’s exactly what React does with Virtual DOM.

---

Why Virtual DOM is Needed?

The Virtual DOM is needed to make web apps faster and more efficient. Instead of updating the entire page every time something changes, it first updates a "virtual" version of the page. Then, it only applies the smallest necessary changes to the real page. This speeds up rendering and reduces unnecessary work, making apps more responsive and smooth.

---

Virtual DOM in React JS

React uses Virtual DOM as a performance optimization layer between developer code and browser DOM.

Workflow:

Component Render
        ↓
Virtual DOM Created
        ↓
Compare with Previous Virtual DOM
        ↓
Find Differences
        ↓
Update Real DOM Efficiently

---

Virtual DOM Internal Architecture Flow

When React renders a component, it does not directly update the browser DOM. Instead, it follows an internal pipeline to calculate the smallest possible change.

The internal rendering flow looks like this:

JSX
↓
React.createElement()
↓
Virtual DOM Object Tree
↓
Fiber Tree Creation
↓
Diffing (Reconciliation)
↓
Minimal Patch Calculation
↓
Commit Phase
↓
Real DOM Update

This pipeline ensures React updates only the necessary elements instead of reloading the entire page.

---

How Virtual DOM Works

Virtual DOM works by creating a lightweight copy of the real webpage in memory, comparing the old version with the new version when changes happen, and updating only the changed parts on the screen instead of reloading everything.

Step 1: Initial Render
When a React component loads:

1. JSX converts into Virtual DOM

2. Virtual DOM converts into Real DOM

3. UI appears on screen

JSX → Virtual DOM → Real DOM → Browser UI

Example:

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

React creates Virtual DOM first, then renders it.

Step 2: State or Props Change

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

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

When count changes React

1. Creates new Virtual DOM

2. Compares with old Virtual DOM

3. Finds difference

4. Updates only changed node

Not entire page

Step 3: Diffing Algorithm

React uses a Diffing Algorithm to compare:

Old Virtual DOM
vs
New Virtual DOM

This process is called Reconciliation.
Example: Old Virtual DOM

<h1>Hello</h1>

New Virtual DOM:

<h1>Hello Kishan</h1>

React detects: Only text changed So it updates only text node.

---

How React Finds Minimal Changes
Rule 1: Different element type → Replace entire subtree

<h1>Hello</h1>

to

<p>Hello</p>

React removes <h1> and adds <p>.

Rule 2: Same element type → Update attributes only

<button color="red">

to

<button color="blue">

Only attribute updated.

Rule 3: Keys help identify list changes

items.map(item => <li key={item.id}>{item.name}</li>)

Keys allow React to track elements efficiently.

---

React Fiber

React Fiber is the new reconciliation engine that improves how React processes updates. It makes rendering more flexible by splitting work into smaller units, so the app stays responsive even during heavy updates.

• It allows React to pause, resume, and prioritize tasks.

• User interactions like clicks and animations get faster response.

• It improves overall performance and smoothness of React apps.

---

Render Phase vs Commit Phase in React

React updates the UI in two important phases:

Render Phase

During the render phase:

• React creates a new Virtual DOM tree

• compares it with the previous tree

• calculates differences

• prepares update instructions

No actual DOM changes happen here.

This phase runs in memory and can be paused, resumed, or prioritized.

Commit Phase

During the commit phase:

• React applies calculated updates to the Real DOM

• updates layout on the screen

• runs lifecycle methods like useEffect()

This phase is fast and cannot be interrupted.

So the workflow becomes:

Render Phase → Calculate changes
Commit Phase → Apply changes

---

Features of Virtual DOM

1. Declarative UI Rendering
   Virtual DOM allows developers to describe what UI should look like, instead of manually controlling how UI changes step-by-step.

   document.getElementById("title").textContent = "Hello Kishan";
   

   <h1>Hello Kishan</h1>
   

   React automatically decides how to update the DOM.

   Benefit:
   Cleaner, readable, and maintainable code.

2. Component-Based Update Tracking
   Virtual DOM tracks changes at the component level, not the entire page level.
   Example:

   If only a button changes inside a dashboard:

   <Dashboard>
      <Sidebar />
      <Navbar />
      <Button />
   </Dashboard>
   

   React updates only:

   <Button />
   

   instead of the full dashboard.

   Benefit:
   Highly efficient rendering for large applications.

3. Improves Application Performance
   Direct DOM manipulation is slow because browsers must:

   • recalculate layout

   • repaint screen

   • update element tree

   Virtual DOM performs changes in memory first, then applies optimized updates to the Real DOM.

   Why important?
   Creates smoother and faster user experience.

4. Batch Updates for Multiple Changes
   Virtual DOM groups multiple updates together and applies them in one operation.

   Example:

   setName("Kishan");
   setAge(21);
   setCity("Jaipur");
   

   Instead of updating DOM 3 times, React updates once.

   **Why important?

   Reduces unnecessary rendering and boosts efficiency.**

---

Understanding Shadow DOM and Virtual DOM

Virtual DOM and Shadow DOM serve different purposes in modern web development. Virtual DOM focuses on improving rendering performance, while Shadow DOM focuses on component encapsulation and isolation.

• Virtual DOM optimizes UI updates by comparing changes before touching the real DOM.

• Shadow DOM creates isolated DOM trees with scoped styles and structure.

• Virtual DOM is a framework technique, while Shadow DOM is a browser-native standard.

---

Real DOM vs Virtual DOM vs Shadow DOM

Feature	Real DOM	Virtual DOM	Shadow DOM
Speed	Slow	Fast	Medium
Update Cost	High	Low	Medium
Memory Usage	High	Low	Medium
Direct Access	Yes	No	Limited
Best Use Case	Static pages	Dynamic apps	Component isolation

---

Real Life Use Cases of Virtual DOM

Social Media Apps
Example: Instagram feed updates dynamically.

Chat Applications
Example: WhatsApp Web
Messages update instantly.

E-commerce Websites
Example: Amazon cart updates
without page reload.

Dashboards
Example: Analytics dashboards
update charts in real time.

Online Editors
Example: Google Docs live editing.

---

Advantages of Virtual DOM

✔ Faster UI updates
✔ Efficient rendering
✔ Improved performance
✔ Cross-platform compatibility
✔ Better developer experience
✔ Reusable components

---

Limitations of Virtual DOM

Even though powerful:

1. Extra memory usage

2. Learning curve

3. Not always faster for small apps

Still best for modern SPAs.