What is the Virtual DOM and how does React's reconciliation work?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
The Virtual DOM is a lightweight in-memory tree of plain objects describing the UI. On updates, React diffs the new tree against the previous one (reconciliation) and applies only the minimal set of real DOM changes.
Detailed explanation
Touching the real DOM is expensive — each mutation can trigger layout and paint. React decouples your declarative description of the UI from imperative DOM operations. When state changes, the component re-renders producing a new element tree; React compares it with the previous tree using its diffing algorithm and commits just the differences to the actual DOM. The diff uses two key heuristics to stay O(n): elements of different types (div → span, or a different component) tear down and rebuild their subtree rather than diffing inside; and sibling lists are matched by keys, not index order. This is exactly why stable keys matter — without them React may misidentify which items changed, causing wrong state or extra work.
Official docs:React docs: Render and Commit
Example
// State change:
// <ul><li>A</li><li>B</li></ul>
// ↓ re-render
// <ul><li>B</li><li>A</li></ul>
// Without keys: React sees position 0 changed (A→B),
// position 1 changed (B→A) → 2 mutations.
// With keys: React matches key="a" and key="b",
// reorders pointers → minimal work.Interview tip
Name the two diff heuristics (type check + keyed siblings) — most candidates stop at 'it diffs trees'. Mentioning Fiber briefly as the reconciler engine adds senior polish.
Common mistakes
- Saying React re-renders mean the whole DOM is rebuilt.
- Not connecting keys to reconciliation behavior.