The Virtual DOM & Reconciliation

0/3 in this phase0/36 across the roadmap

📖 Concept

The Virtual DOM (VDOM) is a programming concept where an "ideal", or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called Reconciliation.

Why the Real DOM is slow: The Real DOM wasn't built for modern, dynamic web apps. Every time you change a DOM node, the browser might have to recalculate the layout (reflow) and repaint the screen. Doing this hundreds of times per second is extremely expensive.

How the Virtual DOM works:

Render: When a component's state changes, React creates a new Virtual DOM tree representing the updated UI.
Diffing: React compares this new tree with the previous Virtual DOM tree. It uses a highly optimized algorithm to find the minimum number of changes needed.
Commit: React applies only those specific changes to the Real DOM.

The Diffing Algorithm (Heuristics): React makes two assumptions to keep the diffing O(n) instead of O(n³):

Two elements of different types will produce different trees.
The developer can hint at which child elements may be stable across different renders with a key prop.

React Fiber: Fiber is the reimplementation of React's core algorithm (introduced in React 16). It allows React to pause, resume, or abort work as it processes the Virtual DOM tree, enabling features like Concurrent Mode and preventing the UI from freezing during heavy updates.

💻 Code Example

codeTap to expand ⛶

1// How React sees your UI (Simplified VDOM representation)
2const vdomNode = {
3  type: 'div',
4  props: {
5    className: 'container',
6    children: [
7      {
8        type: 'h1',
9        props: { children: 'Hello World' }
10      },
11      {
12        type: 'button',
13        props: {
14          onClick: () => console.log('clicked'),
15          children: 'Click Me'
16        }
17      }
18    ]
19  }
20};
21
22// Example of why 'key' is important for Reconciliation
23function List({ items }) {
24  return (
25    <ul>
26      {items.map(item => (
27        // ✅ The 'key' helps React identify which items changed, 
28        // were added, or were removed. Without it, React might
29        // re-render the entire list inefficiently.
30        <li key={item.id}>{item.text}</li>
31      ))}
32    </ul>
33  );
34}
35
36// Visualizing the update:
37// Initial: <div><span>A</span></div>
38// Update:  <div><p>A</p></div>
39// Result: React sees the 'div' is the same, but the child changed
40// from 'span' to 'p'. It will tear down the span and create a p.

🏋️ Practice Exercise

Use the 'Paint Flashing' tool in Chrome DevTools to see the Virtual DOM in action. Watch how only changed elements flash.
Build a simple 'diffing' visualizer that compares two JSON objects and highlights the differences.
Research 'React Fiber' and explain the 'work loop' and 'priority levels' to a peer.
Experiment with rendering a list of 10,000 items with and without keys. Measure the performance difference using the React Profiler.

⚠️ Common Mistakes

Using array indices as keys (this can cause bugs if the list order changes).
Thinking the Virtual DOM is always faster than the Real DOM (it adds overhead, but it's more efficient for most updates).
Modifying the Real DOM directly, which makes the Virtual DOM and Real DOM go out of sync.

💼 Interview Questions

🎤 Mock Interview

Practice a live interview for The Virtual DOM & Reconciliation

Was this topic helpful?

← PreviousDeclarative vs Imperative Next →Vite, Next.js & The Ecosystem