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.

