javascript - Using a index as a key in react. When it is affect and when it doesn't?

Question

(This question already has answers here): question from:https://stackoverflow.com/questions/66059076/using-a-index-as-a-key-in-react-when-it-is-affect-and-when-it-doesnt

Answer 1

Of course, in React, you are required to pass in a unique key value for all elements of an array. Else, you will see this warning in console.

Warning: Each child in an array or iterator should have a unique “key” prop.

So, as a lazy developer, you would simply pass in the loop’s index value as the key value of the child element.

Reordering a list, or adding and removing items from a list can cause issues with the component state, when indexes are used as keys. If the key is an index, reordering an item changes it. Hence, the component state can get mixed up and may use the old key for a different component instance.

What are some exceptions where it is safe to use index as key?

• If your list is static and will not change.
• The list will never be re-ordered.
• The list will not be filtered (adding/removing item from the list).
• There are no ids for the items in the list.

Key should be unique but only among its siblings.