What is the Virtual DOM and How Does React Use It?

React is a JavaScript library for building user interfaces, and one of its core innovations is the Virtual DOM. To understand why it matters, let’s first look at the DOM itself.

What is the DOM?

DOM stands for Document Object Model. It represents the structure and content of a web page as a tree of objects. Each node in this tree corresponds to an HTML element, attribute, text, or comment, and each node has properties and methods that let you modify it dynamically using JavaScript.

Why Use the Virtual DOM?

Manipulating the real DOM is slow. Every change can trigger reflows, repaints, and other expensive browser operations. React solves this with a more efficient alternative — the Virtual DOM.

The Virtual DOM is a lightweight, in-memory representation of the real DOM. React keeps this copy in memory and uses it to determine the minimal number of changes needed to update the UI. This process makes DOM manipulation much faster and more efficient.

Here’s how React uses it:

1. It creates a Virtual DOM (a JavaScript object).

2. When a change happens, it creates a new Virtual DOM.

3. It diffs the new Virtual DOM with the old one.

4. It reconciles the differences.

5. It applies only the necessary updates to the real DOM.

This strategy enables React to provide a fast and seamless user experience without manually dealing with inefficient DOM updates.

---

A Simple Walkthrough

Let’s look at a basic component:

function WelcomeCard({ name }) {
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
      <p>Welcome to my Blog.</p>
    </div>
  );
}

We initially render it like this:

<WelcomeCard name="John Doe" />

Later, we change the prop to:

<WelcomeCard name="Jane Doe" />

How does React handle that update? Let’s break it down step-by-step.

Step-by-Step: How React Updates the DOM

Step 1: Initial Render

1. JSX is compiled by Babel into React.createElement() calls.

2. React builds a Virtual DOM tree — a plain JavaScript object that describes the UI.

3. It also creates a Fiber Tree, an internal data structure used to track work and manage rendering.

4. The browser renders the real DOM based on this structure.

Virtual DOM (initial):

<div class="card">
  <h1>Hello, John Doe!</h1>
  <p>Welcome to my Blog.</p>
</div>

Fiber Tree:

• div (FiberNode)
  ├— h1 (child) → text: "Hello, John Doe!"
  └─ p (sibling) → text: "Welcome to my Blog."

Step 2: Prop Change

Now we change the name prop to "Jane Doe".

React:

• Re-runs the WelcomeCard function.

• Creates a new Virtual DOM that reflects the updated UI.

Updated Virtual DOM:

<div class="card">
  <h1>Hello, Jane Doe!</h1> ← changed!
  <p>Welcome to my Blog.</p>
</div>

Step 3: Diffing

React compares the old and new Virtual DOMs:

• It detects that the <h1> content has changed ("John Doe" → "Jane Doe").

• It sees that the <p> element hasn't changed.

This diffing step is fast — it's just comparing JavaScript objects in memory.

Step 4: Reconciliation (Fiber Tree Update)

React updates the Fiber Tree to reflect what changed:

• div (FiberNode)
  ├— h1 → effectTag: UPDATE
  └─ p → effectTag: NONE

React uses effectTags to mark what needs to be updated.

Step 5: Commit Phase

In the final step:

• React applies all the flagged changes from the Fiber Tree to the real DOM.

• In this case, it updates just the text inside <h1> — from "John Doe" to "Jane Doe".

This minimal, targeted update is what makes React so fast and responsive.

Visual flow of how React efficiently updates the DOM using Virtual DOM.

---

Wrapping Up

So, the next time you see a React component update on your screen, remember—it’s not magic. It’s just the Virtual DOM doing its thing to keep things fast and smooth.

I hope this article helped you get a clearer picture of how React uses the Virtual DOM to manage updates efficiently. If you found it useful or learned something new, feel free to share it with a fellow dev!

Thanks for reading, and if you’ve got any thoughts or questions, I’d love to hear them!