Virtual DOM and reconciliation

Model answer. The virtual DOM is a lightweight JavaScript description of the UI: the tree of elements your components return. It is cheap to create, unlike real DOM nodes.

Reconciliation is how React updates the screen:

1. State changes, so React re-renders the affected components and gets a new element tree.
2. It compares (diffs) the new tree with the previous one.
3. It applies only the necessary changes to the real DOM, in one batch (the "commit").

To keep diffing fast (linear rather than very slow), React uses two assumptions:

• Different element type ⇒ different subtree. If a <div> becomes a <section>, or <Login> becomes <Signup>, React destroys the old subtree (and its state) and builds a new one.
• Keys identify list items across renders, so React can match moved, inserted or removed items rather than comparing by position.

The virtual DOM is not "faster than the DOM" in itself; its value is that you write simple declarative code and React keeps DOM work small. (Modern React's Fiber architecture also lets it split rendering work and prioritise urgent updates such as typing.)