How React diffs a list
During reconciliation React compares the new element tree to the old one and decides what to update. For lists it uses the key prop to match each item to its previous instance instead of comparing by position.
- A key must be stable and unique among siblings
- Matching keys let React move and reuse existing DOM and state
- A missing key falls back to the array index
Why index keys are risky
When you use the array index as a key and the list reorders or items are inserted, React maps the wrong old state onto the wrong new item. This causes inputs to keep stale values or animations to glitch.
- Prefer a stable id from your data
- Index keys are only safe for static, never reordered lists
- Changing a key on purpose remounts a component, resetting its state
Reconcile flow
Key idea
Keys tell React which list item is which across renders, so use a stable unique id to preserve state and DOM, and avoid index keys whenever the list can reorder.