How React Virtual DOM works under the hood

In this article we'll be exploring react.js and the things of react.js that makes it popular and stand out among other libraries ( no fight over library vs framework ).

We'll go through:

1. What problem the Virtual DOM solves

2. Difference between Real DOM vs Virtual DOM

3. Initial render process in React

4. How state or props change triggers re-render

5. Creation of a new Virtual DOM tree

6. What diffing (reconciliation) means

7. How React finds minimal required changes

8. Updating only changed nodes in the Real DOM

9. Why this approach improves performance

10. High-level overview of React render → diff → commit flow

So before directly jumping on the above mentioned topics, let's have a quick intro to react.

Introduction to React.js

React.js is a JavaScript library that helps to build and manage complex UI. and according to the react.js docs ------

"The library for web and native user interfaces".

React.js follows component-based architecture - meaning everything on UI is a component which then accumulate to entire screens, pages, and apps. (cool right ?)

So react makes something called Virtual DOM, but why? let's see ...

What problem the Virtual DOM solves?

Browsers have document object model (DOM) to render the UI, which is heavy and relatively slow. To be more accurate - frequent updates on DOM is really expensive. That is where the concept of Virtual DOM comes to play its role in react. Instead of directly working with DOM react works with the lightweight, in-memory representation of the real DOM.

Difference between Real DOM vs Virtual DOM

The Real DOM is the actual structure used by the browser to render the UI on the screen.

The Virtual DOM, on the other hand, is a lightweight JavaScript representation of the real DOM maintained by React.

Real DOM

• Directly represents the UI in the browser

• DOM updates can be expensive due to layout recalculations (reflow) and repainting

• Frequent or unnecessary updates can impact performance

Virtual DOM

• Exists in memory as a JavaScript object

• Updates are first made here instead of the real DOM

• React compares the new Virtual DOM with the previous version (diffing)

• Only the necessary changes are applied to the real DOM

The key difference is that the Virtual DOM minimizes direct manipulation of the real DOM by ensuring that only the required updates are performed.

Initial render process in React

The initial render in react happens in a process - step by step:

1. Entry Point (index.js / main.jsx)

   import ReactDOM from "react-dom/client";
   import App from "./App";
   
   const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(<App />);
   

Here:

• React finds the <div id="root"></div> in HTML

• Prepares a root container

2. Component Execution Starts

function App() {
  return <h1>Hello World</h1>;
}

Here React:

• Calls App() like a normal function

• Gets JSX output

3. JSX → React Elements

JSX:

<h1>Hello World</h1>

becomes:

React.createElement("h1", null, "Hello World");

This creates a Virtual DOM object

React builds a tree like:

{
  type: "h1",
  props: {
    children: "Hello World"
  }
}

4. Reconciliation (Initial Phase)

• React prepares how UI should look

• No comparison yet (first render)

5. Commit Phase (Real DOM Creation)

React now:

• Creates actual DOM nodes (<h1>)

• Inserts them into the real DOM

• Browser paints it on screen

How state or props change triggers re-render

In React, the UI is driven by state and props.

so Whenever:

• a component’s state changes, or

• it receives new props

React re-runs that component function

setCount(count + 1)

This does not directly update the DOM.

Instead, it tells React: “Something changed — recalculate the UI.”

Creation of a New Virtual DOM Tree

After a state/prop change:

1. React calls the component again

2. JSX is returned again

3. A new Virtual DOM tree is created

Important:

• React does not modify the old tree

• It creates a fresh new version

Think of it like:

Old UI snapshot
New UI snapshot

Now React has two versions to compare.

What Diffing (Reconciliation) Means

Diffing (also called Reconciliation) is the process where React: compares old Virtual DOM vs new Virtual DOM

Find what actually changed

Instead of re-rendering everything, React asks:

• Did this element change?

• Did text update?

• Did a component get replaced?

How React Finds Minimal Required Changes?

React uses a smart comparison strategy:

1. Same element type?

• <div> → <div> → reuse

• <div> → <span> → replace

2. Compare props

Only update changed attributes

3. Keys in lists

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

Keys help React:

• Track elements

• Avoid unnecessary re-renders

-- React builds a list of minimal changes (diff)

Updating Only Changed Nodes in the Real DOM

After diffing:

React enters the commit phase

It:

• Updates only changed elements

• Leaves everything else untouched

Example:

If only text changes:

<h1>Hello</h1> → <h1>Hello World</h1>

React updates only text node, not entire

Why This Approach Improves Performance

Without Virtual DOM:

• Every update → direct DOM manipulation

• Expensive + slow

With React:

• Changes happen in memory first (fast)

• Only necessary updates go to real DOM

• Multiple updates are batched together

This give faster UI updates, smooth user experience and better scalability

High-Level Flow: Render → Diff → Commit

Here’s the full cycle:

State/Props Change
        ↓
Render Phase (create new Virtual DOM)
        ↓
Diff Phase (compare old vs new)
        ↓
Commit Phase (update real DOM)
        ↓
Browser paints updated UI

To sum it up

React does not blindly update the UI.

Instead, it: Recreates the UI in memory Compares it efficiently Updates only what is necessary

This is what makes React apps fast and efficient. Understanding this internal flow not only helps in writing better React code, but also in debugging performance issues and answering deeper interview questions with confidence.