Interview · Fundamentals
Virtual DOM
Why doesn't React touch the DOM directly?
The Virtual DOM is an in-memory representation of the UI tree. React compares it against the previous state (reconciliation) and only applies the minimum necessary changes to the real DOM — rather than rewriting the whole thing.
The full cycle
Render → React generates a new tree of JS objects. Diffing → Compares the new tree against the previous one (O(n) algorithm). Commit → Only the differences are applied to the real DOM. The DOM is slow; JS objects are fast — that's where the gain is.
Reconciliation and keys
When React compares lists it needs to identify which element is which. Without key, it assumes position and may reuse the wrong node. With a stable key, it reconciles correctly even when reordering.
Common pitfalls
- 01The Virtual DOM is not automatically faster than the real DOM — it adds an extra comparison step. Its value is in predictability and developer experience.
- 02React's reconciler uses heuristics — it doesn't find the perfect diff. Understanding the key prop is essential to help it.
- 03In React 18+ the model is more nuanced with concurrent rendering: the same virtual tree can be rendered in multiple 'lanes'.
Was this helpful?
Sign in to give feedback