Using Array Index as React Key Can Silently Corrupt Component State

A long-known React pitfall involves using array indices as component keys, which can cause local state to bleed across unrelated list items when the list changes. React's reconciliation algorithm relies on keys to identify whether a component instance is the same across renders, so if items shift position, state from one row can end up attached to a completely different item. A practical example is a live queue where a user edits a row, but a preceding entry is removed before they finish — the edited state then appears on a different person's row. The bug rarely surfaces during development because it requires the list to reorder or shrink while local state is active, a timing condition common in production but easy to miss in testing. The fix is straightforward: use a stable, unique identifier such as a database ID as the key instead of the array index.