The Virtual DOM Explained
What the Virtual DOM Is
The virtual DOM is a lightweight JavaScript object representation of the real DOM that React keeps in memory. When state changes, React builds a new virtual DOM tree and compares it to the previous one instead of touching the real DOM immediately.
Note: You never create or manage the virtual DOM directly -- it's an internal detail React handles for you.
Warning: The virtual DOM is not literally faster than the real DOM at everything -- its benefit is minimizing the number of real, expensive DOM operations React performs.
Example: What the Virtual DOM Is
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function VDomNote() {
return <p>React compares virtual DOM trees before touching the real DOM.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<VDomNote />);
</script>
</body>
</html>Diffing and Reconciliation
Reconciliation is the process where React compares (diffs) the new virtual DOM tree against the previous one and calculates the minimal set of real DOM changes needed to match it.
Note: This diffing process is why changing one piece of state only updates the specific DOM nodes affected, not the whole page.
Warning: Reconciliation isn't magic -- deeply restructuring a list (changing element types, not just values) can force React to tear down and rebuild more DOM than expected if keys aren't used correctly.
Example: Diffing and Reconciliation
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Ticker() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setCount((c) => c + 1), 1000);
return () => clearInterval(id);
}, []);
return <p>Only this number updates in the real DOM: {count}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Ticker />);
</script>
</body>
</html>Why the Virtual DOM Is Fast
Directly changing the real DOM is slow because the browser has to recalculate layout and repaint the page after every change. React avoids this by batching many small changes into a single lightweight virtual DOM comparison first, then applying only the minimal set of real DOM updates needed. This is why updating state for a small part of the UI does not force the whole page to redraw.
Note: You rarely need to think about the virtual DOM directly -- it is React's internal optimization, not something you write code against.
Warning: The virtual DOM makes updates efficient, but it does not make React updates instant -- expensive render logic inside a component can still slow things down.
Example: Why the Virtual DOM Is Fast
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
</script>
</body>
</html>- Thinking the virtual DOM makes every update instant -- it minimizes DOM work, but expensive JavaScript logic can still be slow.
- Believing you need to interact with the virtual DOM directly in your code -- you never do.
- Confusing 'virtual DOM' with the real browser DOM they're separate representations.
- The virtual DOM is an in-memory representation of the UI that React maintains.
- React compares (diffs) the new virtual DOM against the previous one to find changes.
- Only the minimal necessary real DOM updates are applied, called reconciliation.
- This approach avoids the performance cost of repeatedly touching the real, slower DOM.
No browser-specific restrictions -- an internal React implementation detail available in every React version.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: