How does React's reconciliation algorithm handle keys?

Keys are central to React's reconciliation algorithm for efficiently updating lists. Without keys, React uses element position — if position n had a ListItem before and still does, React assumes it is the same instance and updates it in place. This is wrong for reordered lists — React might update a component with the wrong data, or preserve state from the wrong previous item. With keys: React associates key-identified elements across renders regardless of position. Algorithm: (1) For each key in the new list, check if a matching key exists in the old list. (2) If yes: update the existing component in place (preserve state, update props). (3) If the position changed: React can move the DOM node efficiently without recreating it. (4) Keys in old list with no match in new list: components are unmounted. (5) Keys in new list with no match in old: components are mounted. Keys must be stable across renders — if you generate keys with Math.random() or Date.now(), React sees every render as brand new and recreates all items. Stable IDs from your data model are ideal. Index as key: acceptable only for static lists that never reorder, add, or delete items.