React performance implications of long key value on component

Question

How does length of a string applied to some component collection created from some set of data like this:

{this.state.list.map(item => {
  const url = item.url;
  return (
    <ListItemComponent url={url} key={url}/>
  );
})}

Are there some restrictions? What are performance implications of having long key values?

Background. Sometimes we need to create list of items that are very long (like urls with lots of parameters encoded) and only suitable/unique thing to use as natural key is this very long thing.

score 36 · Accepted Answer · edited Jan 24 '22 at 02:06

The length of the string you use for your key should not impact performance at all.

Strings in Javascript are immutable and additionally modern Javascript engines use string interning, meaning that when your interpreter is checking whether '/some/url/ === '/some/other/url' it does not need to traverse each character in the array in O(n) linear time, but can simply check whether the two values are the same.

See this answer for more context: Do common JavaScript implementations use string interning?

React performance implications of long key value on component

1 Answers1