Is it fine to use the array index as a key in a React list?
Only when the list is static: never reordered, filtered, or inserted into. If items can move or be removed, index keys make React reuse the wrong component state and DOM, so use a stable ID from the data.
Explain it simply
Keys tell React which item is which between renders. With an index key, the item at position 0 is always "item 0", even if you deleted the old first row. React then reuses the first row's state for what is now a different record.
You see this with inputs: delete the first row of a list and the typed text in the remaining fields stays at the wrong rows.
Index keys are acceptable for a fixed list that never changes order, such as a static menu. For anything dynamic, use an ID that belongs to the data, like a database ID.
Example
// Risky if todos can be deleted or reordered
{todos.map((t, i) => <TodoRow key={i} todo={t} />)}
// Stable
{todos.map(t => <TodoRow key={t.id} todo={t} />)}What to say in the interview
"Keys must identify the same item across renders. Index keys break that when the list can change, causing mixed-up state and extra DOM work. I use stable IDs from the data and fall back to the index only for static lists."
Common mistakes
- Generating the key with Math.random() during render, which remounts every row each time.