Why does React need a stable key on list items?
Options
- For the CSS styling of every item in the list
- So reconciliation can match items between renders (Correct option)
- Keys are optional; they only remove a warning
- For SEO indexing of every item in the list
Answer
So reconciliation can match items between renders; unstable keys (like array index on reorderable lists) cause wrong state and extra re-mounts
Why
When a list re-renders, React compares the new items with the old ones to update only what changed. The key tells React which old item corresponds to which new one.
If you use the array index as key and the list is reordered or filtered, React matches the wrong items: input text or checkbox state can jump to another row.
Use a stable unique ID from your data.
Remember
List keys = stable IDs, not indexes.