The Virtual DOM

Subtopic 3 of 3

First, what is the Real DOM?
DOM stands for Document Object Model. It is the browser’s internal tree-like representation of your HTML page. Every tag (<div>, <p>, <button>) is a node in this tree.

The problem: directly manipulating the real DOM is slow and expensive. Every time you change something, the browser has to recalculate styles, redo the layout, and repaint pixels. If you do this for every tiny change, the app gets sluggish.

What is the Virtual DOM?
The Virtual DOM is a lightweight JavaScript object (a plain JS tree) that is a copy of the real DOM, kept in memory by React. It is NOT the actual browser DOM, it is just a fast, in-memory description of what the DOM should look like.

js// Simplified example of what React's Virtual DOM looks like internally
const virtualDOM = {
type: 'div',
props: { className: 'container' },
children: [
{
type: 'h1',
props: {},
children: ['Hello']
},
{
type: 'p',
props: {},
children: ['Count: 0'] // <-- this will change
}
]
};

This is just a JavaScript object. Creating and comparing JS objects is extremely fast, much faster than touching the real browser DOM.

How the Virtual DOM Works (Step by Step)

Step 1: Initial Render
React creates a Virtual DOM tree and then renders it into the real DOM once, at startup.
Step 2: State Changes
When something changes (e.g., a counter increments), React does NOT immediately touch the real DOM. Instead, it creates a new Virtual DOM tree.
Step 3: Diffing
React compares the old Virtual DOM and the new Virtual DOM using a process called reconciliation (also called the “diffing algorithm”). It finds exactly which nodes changed.
Step 4: Patch (Minimal Update)
React updates only the changed nodes in the real DOM. Not the whole page, just the tiny part that actually changed.

jsx import { useState } from 'react';

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

// When button is clicked:
// 1. setCount triggers a re-render
// 2. React builds a NEW virtual DOM
// 3. React diffs old vs new virtual DOM
// 4. React finds only the  changed (0 → 1)
// 5. React updates ONLY the  in the real DOM

return ( Counter App {/* unchanged — not touched */}
Current count: {count} {/* only this changes */}setCount(count + 1)}>
Increment {/* unchanged — not touched */});
}

Without React, a naive approach would be to re-render the entire block. React's Virtual DOM ensures only the  is touched in the real DOM.

Seeing the Virtual DOM in Action

jsximport { useState } from 'react';

function UserCard({ name, score }) {
return ( 
{name} {/* Never re-rendered if name doesn't change */}
Score: {score}{/* Re-rendered only when score changes */});
}
function App() {
const [score, setScore] = useState(0);

// React's Virtual DOM diff will find: 
// "Alice" → unchanged → skip
// "Score: 0" → changed to "Score: 1" → update this node only
return ( setScore(score + 1)}>+1 Score);}

Each click updates only the <p> tag in the real DOM. The <h2> and <button> are untouched.