Diffing Algorithm

When state changes, render produces a NEW vnode tree. Compare to OLD tree, apply minimal DOM changes.

Key insight: same-position children compared pairwise. Different = full subtree replace.

Generally O(n) where n = total nodes. NOT O(n²) tree edit distance — that would be too slow for live UIs.

Heuristic: assume parents preserve children in same positions. Wrong if children reorder; that's where keys come in.

Keys (for stable identity):

Diff with keys:

• Match old and new children by key.
• Reorder DOM nodes accordingly.
• Skip diffing of unmoved keys.

Without keys: re-render of large lists is slow + can mismatch state (input value, scroll position).

React's reconciliation: O(n) by assuming local stable order; uses keys for hint.

Vue 3 uses a similar but simpler diff.

Solid + Svelte don't diff: compile-time analysis tracks exactly what changes.