React index as key, is this a good practice? or should I use react-uuid?

user_5488368 0
Viewed 1053

Hi have a list of items that need to be rendered as a group of buttons, I just want to know which is the good and simplest solution.

first option is just use the key as item key


const sampleoutput =[];
for (const [key, value] of Object.entries(sampleItem)) {
    sampleoutput.push(<li>
       <a key={key}
          href="#!"
          onClick={value.onClick}
       >
           {value.title}
       </a>
    </li>);
}

the second solution is to use react-uuid

import uuid from "react-uuid";
sampleItem.map((value) => {
    return (<li>
       <a key={uuid()}
          href="#!"
          onClick={value.onClick}
       >
           {value.title}
       </a>
    </li>);
})

I want also to consider the performance, the second option has another set of processes to generate a key. I am a little concerned with the first option even it is much simpler because of this article https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318

Thank you in advance for your advice.

react-native reactjs for-loop foreach javascript
3 Answers
React expects stable static key which will last till component life 
Using this key, it decide whether new component instance need to
create or  have to update existing component instance property.

react-uuid will generate dynamic key whenever you make a call to uuid() and it will regenerate on every rendering.

Dynamically generated new key will cause to create a new component instance every time whenever there is re-rendering happened.

It's better to create a key from collection only which does not changes and exist there until data exist in collection.

Try to avoid react-uuid and use first approach.

user_46139330

My opinion, be careful when you want to use key = index, some methods can mutate your array (slice / splice), and index will be mess. Just my opinion, bro.

user_111627790

I wouldnt use index as key because

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.

Therefore, avoid this practice, and make sure unique ids are generated to be assigned as key.

So as you mentioned UUid are the best. source for unique generation of keys

hope it helps. feel free for doubts

user_113553030
Related