What is the Virtual DOM in React and how does it work?

Question

What is the Virtual DOM in React and how does it improve performance?

Answer

The Virtual DOM (VDOM) is a JavaScript object tree that mirrors the structure of the real DOM. React keeps its own copy of this tree in memory and uses it to compute the most efficient way to update the browser's DOM.

How it Works — The Reconciliation Process

1. Render — when state or props change, React generates a new VDOM tree from your JSX
2. Diff — React's diffing algorithm compares the new VDOM with the previous snapshot (O(n) complexity using heuristics)
3. Patch — only the changed nodes are applied to the real DOM in a single batch

// Before state change — VDOM
<ul>
  <li>Alice</li>
  <li>Bob</li>
</ul>

// After state change — React diffs and only adds the new <li>
<ul>
  <li>Alice</li>
  <li>Bob</li>
  <li>Charlie</li>  ← only this is added to the real DOM
</ul>

Why Keys Matter

The key prop helps React identify which items changed, were added, or removed in a list — without it, React may re-render the entire list unnecessarily:

// ✅ stable key lets React reuse existing DOM nodes
{users.map(user => (
    <li key={user.id}>{user.name}</li>
))}

React Fiber

Since React 16, the reconciler is called Fiber. It can pause, abort, or reuse work and assigns priority to updates — enabling concurrent features like useTransition and Suspense.