What are keys in React and why does using the array index hurt?
Quick answer
Keys uniquely identify list items so React can match them across renders. Index keys break when items reorder/insert/delete, causing wrong state and DOM reuse.
In detail
During reconciliation React matches list children by their key, not position. A stable key (an id from your data) tells React 'this is the same item', so it preserves the DOM node and any internal state. Using the array index means the key changes when the list reorders or an item is removed, so React reuses the wrong nodes — a classic bug where typed text or checkbox state jumps to the wrong row.
// ❌ index key with stateful rows
{todos.map((t, i) => <EditableRow key={i} todo={t} />)}
// ✅ stable id
{todos.map(t => <EditableRow key={t.id} todo={t} />)}⚠️Gotcha
Index keys are only safe for static lists that never reorder, insert, or delete.
Why interviewers ask this: A favourite that reveals whether you understand reconciliation.
Common follow-up questions
- →Can a component read its own key?
- →How can key be used to reset a component?
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399