What is the virtual DOM and how does React use it?

Virtual DOM#

Virtual DOM is a lightweight in-memory representation of the real DOM tree as JavaScript objects.

How the update process works

1. When state changes, React creates a new virtual tree.
2. The reconciliation algorithm compares the old and new trees (diffing).
3. React computes the minimal set of changes.
4. Only those changes are applied to the real DOM.

Why it matters

Real DOM operations are expensive. Manipulating JS objects is faster, so batching and the diff algorithm provide a noticeable performance boost.

React 18+ has concurrent rendering: updates marked as transitions (startTransition, useDeferredValue) can be interrupted and deferred so urgent input stays responsive. It's opt-in per update, not a separate "Concurrent Mode".

updated Nov 8, 2026