Why are keys important in React lists?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
Keys give each list item a stable identity across renders so React's reconciler knows which item is which — enabling efficient moves and preserving per-item state. Use unique, stable IDs, not array indices.
Detailed explanation
During reconciliation React matches old and new children by key. With proper keys, reordering means moving existing instances rather than rebuilding them — input focus, animations, and local state survive correctly. Index keys break this: if the array shifts (insert at front, removal, sorting), every item's index changes, so React thinks different content lives at each slot. Consequences range from wasted re-renders to notorious bugs like typing in row 2's input while editing row 1. Indices are acceptable only when the list is static, never reordered, and items carry no identity or internal state. Keys need to be unique among siblings only, not globally, and shouldn't be generated randomly per render — that destroys identity entirely.
Official docs:React docs: Rendering Lists
Example
// ❌ index keys — breaks on reorder/delete
{todos.map((todo, i) => <TodoRow key={i} todo={todo} />)}
// ✅ stable identity
{todos.map(todo => <TodoRow key={todo.id} todo={todo} />)}Interview tip
Give the concrete failure mode — 'type into an input, delete a row above, watch your text jump' — then state the rule: stable IDs unless truly static lists.
Common mistakes
- Defaulting to index keys without knowing the tradeoff.
- Suggesting random keys like Math.random() — worse than indices.