Keys in React Lists: Why They Matter

30‑second interview answer

React uses keys to keep track of which list item is which between renders. Keys let React preserve component identity, so state and DOM updates stay aligned with the right item. Use a stable, unique key (like an id). Avoid using array index as a key when the list can be reordered/filtered/inserted.

Why keys exist (the mental model)

React’s reconciliation needs a way to answer:

“Is this the same item as before, or a different one?”

Without keys, React falls back to position (index) which breaks identity when the list changes.

The correct way: stable unique ids

{todos.map(todo => (
  <TodoItem key={todo.id} todo={todo} />
))}

This works because todo.id stays tied to the same logical item.

The classic bug: using index as key

Bad (common):

{todos.map((todo, index) => (
  <TodoItem key={index} todo={todo} />
))}

This looks fine… until you insert/remove/reorder.

Example: insert at top

If you add a new item at the top, all indices shift by 1. React thinks:

• “Item that used to be key=0 is now key=1”

So it reuses the wrong component instance for the wrong todo.

What breaks?

• input values appear under the wrong row
• toggles/checkbox state moves to a different item
• animations/glitches

When is index key acceptable?

Index can be acceptable ONLY if all are true:

• list is static and never changes order
• items are never inserted/removed
• list is not filtered

In interviews, it’s safer to say:

“Index key is risky; use stable ids. I’d only use index for static lists.”

Keys and component state (important)

Component state is tied to component identity.

If React thinks an item is “the same component” because the key matches, React preserves its state.

If keys change, React destroys old instance and creates a new one → state resets.

Common follow-up: “What about random keys?”

Also bad:

key={Math.random()} // ❌

Because keys change every render, React remounts everything every time.

Mini Q&A (practice)

Q1: Why are keys required in lists?

• To preserve identity across renders for correct reconciliation.

Q2: Why is index key dangerous?

• Identity becomes position-based; reordering/inserting causes wrong state/DOM association.

Q3: What happens if a key changes?

• React treats it as a different component → unmount/remount.

Summary checklist

• I can explain keys as identity.
• I can explain the index-key bug with an insertion example.
• I can describe what happens when keys change.