Frontend

What is Reconciliation?

The diffing process a UI library uses to turn a new virtual tree into the minimum set of real DOM updates.

Definition

When component state changes, React re-renders to produce a new virtual DOM tree, then reconciles it against the previous one to compute the smallest set of real DOM mutations. A general tree-diff is O(n³), so React applies two heuristics to get O(n): elements of different types produce entirely new subtrees, and developer-supplied `key` props identify which children in a list are the same element across renders. This is why using array indices as keys causes bugs when a list reorders—React matches the wrong elements and carries stale state across. React's Fiber architecture, introduced in React 16, made reconciliation interruptible so long renders can yield to higher-priority work like typing.

Keep the references coming

One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.