Why is using array index as a key bad in React?
Because when the list is reordered, filtered, or has items inserted, the index no longer points to the same item. React reuses the wrong elements, causing subtle bugs like inputs showing the wrong data.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Why the key Prop Matters When Mapping Lists in React
Keys tell React which elements correspond to which items across re-renders. When the list changes, React uses keys to match old elements to new ones and update only what is necessary, instead of re-rendering everything.
A good key is stable across re-renders and unique among siblings. The best key is a unique id from your data, like a database id. Avoid index-based keys for dynamic lists.
No. Keys only need to be unique among siblings in the same list. Two different lists can reuse the same key values without causing problems.
Still have questions?
Browse all our FAQs or reach out to our support team