Avoiding Array Indices as Keys

1. The Temptation of the Array Index

When developers first encounter the React warning about missing keys, the easiest quick fix often seems to be using the array index provided by .map():

While this silences the browser console warning, using array indices as keys is a dangerous anti-pattern that can lead to subtle, baffling bugs in stateful or dynamic lists.

2. Why Index as Key Causes Critical Bugs

An array index does not represent the identity of the data item—it only represents its current physical slot in the array.

Scenario: Inserting at the Beginning of a List

Consider a list of 3 items with internal state (such as input fields where the user entered text):

What Went Wrong?

1. 1
   React checked key=0. It found that an element with key=0 already existed previously.
2. 2
   React kept the existing DOM node and its internal input state ("Task A"), assuming it was the same item!
3. 3
   It updated the props of key=0 to Item X, but the user's typed text stayed attached to the wrong item!
4. 4
   The newly inserted item X now displays Task A's text, and the last item appears blank or corrupted.

3. Visual Reproduction: Form Checkboxes and Inputs

This issue manifests most severely in:

• Lists of items with checkboxes (checking one item and deleting it causes the next item to appear checked).
• Lists of text inputs where user input is held in local state.
• Lists with animations or transitions (CSS transitions animate the wrong elements).

4. When Is Using an Index Acceptable?

Using an index as a key is strictly acceptable only when all three of the following conditions are simultaneously met:

1. 1
   The list is completely static (items will never be added, removed, or reordered).
2. 2
   The items have no unique IDs in the data source.
3. 3
   The list items are purely presentational (they contain no internal state, no uncontrolled inputs, and no form controls).

If the list can ever be filtered, sorted, or mutated, you must generate or supply a persistent unique ID.