Keys in Lists ⚛️

Why React nags you for a key — and what it actually does.

When you render an array, React asks for a key. It's not a formality — it's how React tracks each item across renders.

Identity, not order

Keys tell React which item is which when the list changes. Without stable keys, React can’t tell an insertion from a reorder, so it may reuse the wrong DOM node — losing focus, input text, or animation state.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

The rules

• Use a stable, unique ID from your data (todo.id).
• Avoid the array index as a key when the list can reorder, filter, or grow — it causes subtle state bugs.
• Keys must be unique among siblings, not globally.

TL;DR: Keys give list items a stable identity so React updates the right element — use a real unique ID, not the index.

Get Marcelo Domingues’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Check one .map() in your code: is its key truly stable? ✅