Virtual DOM
An in-memory representation of the UI that frameworks (React, Vue) diff against the previous version to compute minimal DOM updates. The virtual DOM is faster than direct DOM manipulation because it batches and minimizes real DOM operations.
- When using React or Vue (it's built in).
- When you can compile away the framework (Svelte).
- Static content (no interactivity needed).
Definition
The virtual DOM is a lightweight JS object tree mirroring the real DOM. On state change, the framework builds a new vDOM, diffs it against the old (reconciliation), and applies only the changed patches to the real DOM. This avoids expensive full-DOM reflows.
Why it exists
Direct DOM manipulation is slow (each change triggers reflow). The virtual DOM batches changes and applies minimal updates, making UIs fast without manual optimization.
How it works
Render produces a vDOM tree. The framework diffs old vs new vDOM (reconciliation), computes the minimal set of DOM mutations, and applies them in a batch. Keys help identify which items changed in lists. React's reconciler is stack-based; concurrent mode can interrupt.
Scaling limits
Diffing has a cost; for very large lists, keys and windowing matter. Svelte avoids vDOM entirely by compiling. Over-reliance on vDOM can hide performance issues (unnecessary re-renders).
Cost shape
Alternatives
- Direct DOM manipulation — Faster for tiny updates but manual and error-prone.
- Fine-grained reactivity (Solid) — No diffing, direct updates, but needs a different mental model.
Failure modes
- Unnecessary re-renders from poor memoization.
- Missing keys in lists causing bugs.
- Large vDOM trees slowing diffing.