React Interview Question: What Is the Virtual DOM and Reconciliation?

Short answer: when state changes, React calls your components to produce a new tree of plain JavaScript objects describing the UI (often called the virtual DOM). It compares this tree with the previous one (reconciliation) and applies only the necessary changes to the real DOM.

Two phases

1. Render: React calls components and builds the new element tree. Pure computation, no DOM changes. Can be interrupted in concurrent rendering.
2. Commit: React applies the differences to the DOM, then runs layout effects and, after paint, effects.

The diffing heuristics

• Different element types (<div> to <section>, or <Profile> to <Settings>) mean the old subtree is destroyed and a new one created, losing its state.
• Same type: React keeps the DOM node or component instance and updates changed props.
• Lists are matched by key, so items can move without being recreated.

// Toggling between these resets the input's state, because the parent type changes
{isEditing ? <form><input /></form> : <div><input /></div>}

Common misconception

The virtual DOM isn't "faster than the DOM" by magic; it adds work. Its value is the programming model: you describe what the UI should look like for the current state, and React figures out the minimal updates. Some frameworks (Svelte, Solid) achieve similar results without a virtual DOM by compiling updates.

Bonus

React Compiler and memoisation reduce how often components re-render; keys and stable component types reduce how much of the DOM is recreated.