Virtual DOM
Last updated: 2026-11-02
Virtual DOM Virtual DOM
The virtual DOM is a lightweight tree of plain JavaScript objects that React keeps in memory to describe the real interface. When state changes, React first computes a new tree, diffs it against the old one, and then commits only the differences to the real DOM, so the screen updates at the smallest possible cost. This two-step pipeline is the heart of React's rendering model.
| Group | Core Concepts |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
State changes
→ The component function runs again and produces a new virtual DOM tree
→ Diff: the old and new trees are compared level by level to find the differences
→ Commit: only those differences are applied to the real DOMReturns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Two centered lines — "Number" and "re-rendered N times" — plus a button. Every click bumps both numbers while the rest of the page stays perfectly still, which shows "the function re-runs, the DOM only updates the diff".💡 Key Points
ℹ️ Info The virtual DOM is a means of implementing declarative UI, not a performance silver bullet; the diff also follows heuristics such as comparing siblings at the same level.
💡 Tip Stable keys directly affect diff quality: a stable key lets React reuse existing nodes and avoid needless work.
⚠️ Warning Never manipulate the real DOM by hand inside a render function — that bypasses the virtual DOM's update mechanism and leaves state and interface out of sync.
🏷️ More Core Concepts
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Is the virtual DOM always faster than manipulating the DOM directly?
A Not always. A single hand-tuned DOM operation can be faster; the value of the virtual DOM is that lots of frequent updates stay fast and maintainable, with a much lower mental load.
Q How does React's diff algorithm work?
A It uses heuristics: elements of a different type are rebuilt, elements of the same type only get their changed attributes updated, and sibling lists are matched by key to decide whether to reuse, move or delete a node.
Q What does key have to do with the virtual DOM?
A When diffing a list, React uses the key to pair old and new nodes one by one; a stable key reuses nodes correctly, while keying by index can update the wrong item.
