React.js: the key value in each child component should be unique?

Question

I use React to render a list of data, but each item in the data have not been assigned id or uuid or something like identify property. Can I use the item index as the key? like:

data.map((item, index) => {
    <Item key={index}></Item>
})

What I concerned is if some other list on the page also use the order index as the child component key, would it matter? Should the key be a unique identify?

ctrlplusb ctrlplusb · Accepted Answer · 2016-07-15T07:59:10

The key only needs to be unique to that list.

I also had that worry initially.

From the official docs:

Remember that the key only has to be unique among its siblings, not globally unique.

Keys should be stable, predictable, and unique. Unstable keys (like those produced by Math.random()) will cause many nodes to be unnecessarily re-created, which can cause performance degradation and lost state in child components.

React.js: the key value in each child component should be unique?

2 Answers