Chapter 1React · Theory

Virtual DOM & Reconciliation

React maintains a lightweight copy of the DOM in memory and diffs it to minimize real DOM updates.

Chapter 1 of 18·core·fresher

The virtual DOM (VDOM) is a JavaScript object tree that mirrors the real DOM structure. When state changes, React creates a new VDOM tree and compares it to the previous one — a process called reconciliation (or diffing).

The diffing algorithm works on two assumptions: (1) elements of different types produce different trees; (2) elements with stable keys across renders can be reused. This allows React to compute the minimal set of real DOM mutations needed, batching them into a single update.

React 18 further optimizes this with automatic batching — multiple setState calls within async operations are batched together rather than triggering separate renders. The virtual DOM approach has overhead for very simple UIs but significantly reduces expensive real DOM operations for complex, frequently-updating UIs.

State change
     ↓
New VDOM tree
     ↓
Diff (reconcile) with previous VDOM
     ↓
Minimal DOM patches
     ↓
Real DOM update (one flush)

Diagram: Virtual DOM & Reconciliation