CODEWITHSUNDEEP
javascriptreactjs
konrad
konrad

Reputation: 1724

How unique should a React component Key be?

This is a quick one: what is the scope in which the children keys have to be unique? Is this just the parent component or the whole app?

If the latter is true, does it mean react diff algorithm will preserve an element when its moved across parent components?

Upvotes: 29

Views: 4951

Answers (3)

Daniel Santana
Daniel Santana

Reputation: 1837

The official documentation says:

  • Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays
  • Keys must not change or that defeats their purpose! Don’t generate them while rendering

A more detailed answer can be found here, but in short, as react uses the key attribute to efficiently manage its Virtual Dom, the best strategy is to have a strong and unique ID coming from your database.

With this, you have 3 options:

- key={item.id} // best
- key={useId()} // from import { useId } from React;
- key={`collectionName_${item.id}`}

Upvotes: 1

Glenn Ko
Glenn Ko

Reputation: 11

Yes, looks like it...if you re-parent it, it'll give a different reactid (eg. http://webcloud.se/react-sortable/nested.html )

and will unmount/re-mount again. ...

http://jsfiddle.net/46x0j6uq/1/

,componentWillUnmount: function() {
 //console.log("unmounted:", this.props);
 clearInterval(this.state.intervalId);
 clearTimeout(this.state.timeoutId);
}
,componentDidMount: function(){
  // console.log("mounted:", this.props);
  this.state.intervalId = setInterval(this.incrementCount, 1000);
 this.state.timeoutId = setTimeout(this.setColorToBlack, 300);
}

So, better not to store state in the view component itself, since it might reset itself. The above fiddle is just a demo to prove a point.

Other related links: Using keys to identify nested components in React.js

I did wish React had something to consider scoped/nested key states beyond the same level, but i guess the performance of unmounting/re-mounting again should hopefully not be too detrimental.

Upvotes: 1

Björn Boxstart
Björn Boxstart

Reputation: 1168

Unique within its siblings, so the level directly under its parent. The children of the parent component however can use the same key again, because finally, react will compose the complete key out of the key of the current component and all of its ancestors. The example below only contains auto-generated keys, but if you provide your own key, it will be used instead.

React ID's

You can see the composed ID's in Chrome developer tools (tab Elements).

Upvotes: 28

Related Questions