Reconciliation algorithm

Summary

React walks trees comparing element types — same type updates props/DOM in place; different type unmounts subtree. Keys identify stable identity across siblings; missing/wrong keys cause state bugs and DOM reuse errors. Bailout when props/state unchanged (memo, PureComponent, compiler). Understand what triggers full subtree reconciliation vs bailout.

Code example

// Same element type → update props in place
// Different type → unmount subtree
function List({ items }) {
  return items.map((item) => <Row key={item.id} data={item} />);
}

Key points

• React walks trees comparing element types — same type updates props/DOM in place; different type unmounts subtree.
• Keys identify stable identity across siblings; missing/wrong keys cause state bugs and DOM reuse errors.
• Bailout when props/state unchanged (memo, PureComponent, compiler).
• Understand what triggers full subtree reconciliation vs bailout.

Further reading

• Render and commit
• Keys in lists

Related concepts

• Fiber architecture