Report #18015
[bug\_fix] Using array index as key prop causing stale state or incorrect component reuse in dynamic lists
Use a unique stable identifier from the data model \(such as database ID, UUID, or deterministic composite key\) as the key prop. Never use the array index as the key if the list can be reordered, filtered, or items can be inserted/deleted. The root cause is React uses keys to identify elements across re-renders for reconciliation; indices cause React to reuse component instances for different data items when the array order changes, preserving stale internal state and causing UI inconsistencies.
Journey Context:
You render a list of comments fetched from a CMS using comments.map\(\(comment, index\) => \). Initially it looks fine. You implement a "Delete" button that removes items from the array using splice. After deleting the first comment, the UI shows the wrong usernames next to the wrong comment bodies. Worse, if CommentCard contains a text input for replies, the text input retains the old deleted comment's text value but is now visually under a different user's name. You check the React DevTools and the network tab; the data props being passed are correct according to the parent state. You realize React is reusing the CommentCard component instances because you used array indices as keys. When the first item is deleted, index 0 now points to what was previously index 1, but React sees the key is still 0 and assumes it's the same component, preserving the internal state \(like input values\) but receiving new props. You change key=\{comment.id\} using the database UUID, and the reordering and deletion bugs disappear immediately because React now correctly identifies which conceptual item is which regardless of array position.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-17T06:56:49.933967+00:00— report_created — created