#155 What is Virtual DOM in React?

• The Virtual DOM (VDOM) is a lightweight copy of the Real DOM kept in memory.
• It is a JavaScript object representation of the actual DOM.
• React uses it to make UI updates faster and more efficient.

---

🔹 How It Works (Step by Step)

1. When your React component’s state or props change, React creates a new Virtual DOM tree.
2. React compares this new VDOM with the previous VDOM using the Diffing Algorithm.
3. Only the changed elements are identified.
4. React updates the Real DOM efficiently in a process called Reconciliation.

👉 This makes React much faster than directly manipulating the DOM.

---

🔹 Example

Suppose you have a simple counter:

import React, { useState } from "react";

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

• When you click the button:
  • React doesn’t re-render the entire <div> in the Real DOM.
  • Instead, it updates the Virtual DOM, finds that only the <h2> text (count) changed, and updates just that part in the Real DOM.

---

🔹 Benefits of Virtual DOM

• Performance Boost → Updates are faster because React avoids re-rendering the whole DOM.
• Efficient UI Updates → Only minimal changes are applied.
• Cross-platform → VDOM concept helps React Native too.
• Predictable → Since React controls updates, UI behaves consistently.

---

🔹 Real DOM vs Virtual DOM

Feature	Real DOM 🏛️	Virtual DOM 🪞
Updates	Slow (direct manipulation)	Fast (batch updates)
Rendering	Entire tree re-rendered	Only changed nodes updated
Memory	Heavy	Lightweight (JS objects)
Abstraction	Direct representation of HTML	Copy of DOM in memory

---

✅ Short Interview Answer

“The Virtual DOM is a lightweight copy of the Real DOM stored in memory. When state or props change, React creates a new Virtual DOM, compares it with the old one using a diffing algorithm, and efficiently updates only the changed parts in the Real DOM. This makes UI rendering faster and improves performance.”