What is the Virtual DOM and how does reconciliation work?

The Virtual DOM is a JavaScript object tree that mirrors the real DOM. It's cheap to create and manipulate.

Reconciliation process:

1. State/props change triggers a re-render — React calls your component function
2. React builds a new Virtual DOM tree
3. Diffing — React compares (diffs) new tree with the previous tree
4. Committing — React applies only the changed nodes to the real DOM

Diffing heuristics (O(n) instead of O(n³)):

• Elements of different types → tear down and rebuild the whole subtree
• Same type → update only changed attributes
• Lists → use key prop to match old and new items

// React sees these as DIFFERENT types → full rebuild
...
  →  ...  // destroys div, creates span

// Same type → just updates className attribute
  →