Practice · Lists
stable key
The index is not an identity
Using the array index as a key tells React "the third element is always the same element". When the list is reordered, filtered, or items are inserted, that assumption breaks and React reuses the wrong DOM node.
Why it matters
React uses the key to match nodes from the previous render to the new one. With key={i}, the node at position 0 is always reused for the item at position 0, regardless of whether it's a different item. The result: local state (inputs, animations, focus) gets attached to the wrong node.
The rule
Use a stable, unique identifier from the data: item.id, item.slug, or any field that doesn't change when the array is transformed. The index is only safe when the list is completely static and never reordered or filtered.
Common pitfalls
- 01key={index} on dynamic lists causes local state (inputs, animations) to stick to the wrong node when reordering.
- 02If your data has no id, generate it when creating the item — not in the render (each render would produce a new key and React would unmount the component).
- 03The key is only visible to React; it doesn't reach the child component as a prop.
Was this helpful?
Sign in to give feedback