Our today’s learning is Virtual DOM in React.js. One of the biggest reasons React is so fast and popular is because of the Virtual DOM. You’ll hear this term a lot, but many beginners get confused about what it really means. Let’s break it down in simple terms.

In the last few blogs, we worked with state updates, events, and conditional rendering. You might have noticed that when the state changes, React updates the UI instantly—without us writing extra DOM manipulation code. But how does React know what to update and what to leave unchanged?

That’s where the Virtual DOM comes in. Even if you didn’t realize it, you’ve already been using this powerful concept since Day 5! Today, we’ll finally uncover what’s happening behind the scenes and why it makes React so efficient.

What is the DOM?

• The DOM (Document Object Model) is a tree-like structure of your webpage.
• Every element (div, button, h1) is a node in that tree.
• When something changes, like updating a text, the browser updates the DOM.

👉 Problem: Directly changing the real DOM can be slow if you have a lot of elements.

What is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight copy of the real DOM that React keeps in memory.

Instead of updating the real DOM every time state changes:

1. React updates the Virtual DOM first.
2. React compares the new Virtual DOM with the old one (this process is called Diffing).
3. React finds the differences (what changed).
4. React updates only the changed parts in the real DOM (this process is called Reconciliation).

Example: Without vs With Virtual DOM

Imagine a list of 100 items. You change just one item:

• Without Virtual DOM: The browser may refresh or re-render all 100 items.
• With Virtual DOM (React): React sees only 1 item changed → updates only that item.

👉 This makes React apps much faster.

Demo Example (Counter)

Here’s a small code example that shows React updating efficiently:

import { useState } from "react";

export default function CounterDemo() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-6 text-center">
      <h1 className="text-2xl font-bold mb-4">React Virtual DOM Demo</h1>
      <p className="mb-4">Count: {count}</p>
      <button
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        onClick={() => setCount(count + 1)}
      >
        Increment
      </button>

      <div className="mt-6">
        <p>Static text that never changes</p>
        <p>Another static line</p>
        <p>And one more line...</p>
      </div>
    </div>
  );
}

import { useState } from "react";

export default function CounterDemo() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-6 text-center">
      <h1 className="text-2xl font-bold mb-4">React Virtual DOM Demo</h1>
      <p className="mb-4">Count: {count}</p>
      <button
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
        onClick={() => setCount(count + 1)}
      >
        Increment
      </button>

      <div className="mt-6">
        <p>Static text that never changes</p>
        <p>Another static line</p>
        <p>And one more line...</p>
      </div>
    </div>
  );
}

What happens here?

• When you click Increment, React updates only the Count value in the DOM.
• The static text below (Static text that never changes...) is not re-rendered in the real DOM.
• React handles this efficiently using its Virtual DOM diffing.

Key Takeaways

• Real DOM = heavy, slow to update.
• Virtual DOM = lightweight copy managed by React.
• React uses Diffing & Reconciliation to update only what’s needed.
• That’s why React apps are fast and efficient.

👉 Up Next (Day 8): We’ll explore Lists & Keys in React—how to render arrays and why keys are so important.