Skip to content
FrontendHaltFrontendHalt
React·Intermediate·Coding·1 min read

Why are stable keys important in a list?

Short interview answer

Keys let React match siblings across insertions, removals, and reordering. A stable key should represent the underlying entity. An array index represents a position, so using it for reorderable stateful rows can move state and DOM association to the wrong item.

Example

JSX
// Bad: index changes meaning when the list reorders{rows.map((row, i) => <Row key={i} row={row} />)}
// Good: identity follows the record{rows.map((row) => <Row key={row.id} row={row} />)}

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to React reconciliation

Related questions