What is the virtual DOM and how does reconciliation work?
Quick answer
The virtual DOM is a lightweight JS copy of the UI. React diffs the new tree against the old one (reconciliation) and applies only the minimal real-DOM changes.
In detail
On each render React builds a new virtual DOM tree, then compares it to the previous one using a heuristic O(n) diff: different element types are replaced wholesale, same types are patched in place, and list children are matched by key. Only the actual differences are committed to the real DOM, which is what keeps updates fast while letting you code as if the whole UI re-renders.
// same type -> patched; different type -> replaced
{isEditing ? <input /> : <span />}
// switching unmounts one and mounts the otherWhy interviewers ask this: Tests the mental model behind React's performance.
Common follow-up questions
- →Is the virtual DOM always faster?
- →Why are keys important in lists?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399