Overview
This page is the atomic definition. The React deep-dive lives at react.
Definition
The virtual DOM (VDOM) is an in-memory JavaScript object tree that mirrors the structure of the real browser DOM. When component state changes, the framework re-renders to a new virtual tree, diffs it against the previous snapshot (reconciliation), and applies only the minimal set of real DOM mutations. React popularized the pattern; Vue uses a similar approach. The diff algorithm runs in O(n) time by assuming elements of different types produce different trees and stable keys identify list children across renders. The cost is paid in JavaScript: two render passes per update instead of one direct mutation. React 18 introduced concurrent rendering, which can interrupt reconciliation to handle higher-priority updates without blocking the main thread.
When it applies
The virtual DOM is built into React and Vue; developers use it implicitly by writing JSX or template syntax. Avoid manual DOM manipulation inside VDOM-managed components because direct mutations are overwritten on the next reconcile cycle.
Example
// React reconciles this efficiently when `count` changes.
function Counter({ count }) {
return <span className="badge">{count}</span>
}Only the text node inside <span> changes; the element itself is reused.
Related concepts
- react - the deep-dive on React rendering and reconciliation.
- hydration - the process that attaches event listeners to a server-rendered VDOM snapshot.
- server-component - React Server Components skip VDOM entirely for static subtrees.
- suspense-boundary - boundaries that pause reconciliation for async data.
- nextjs - Next.js layering on top of React’s VDOM lifecycle.
Citing this term
See Virtual DOM (llmbestpractices.com/glossary/virtual-dom).