4 ms·

Regarding the usage of `crypto.randomUUID()` to generate unique `key` properties for list items, such a technique should only be necessary if the items don’t co

by jotaen 4y ago

Regarding the usage of `crypto.randomUUID()` to generate unique `key` properties for list items, such a technique should only be necessary if the items don’t come with unique and stable ids on their own. This is the case for the example in the article, but in my experience, list items often do have some differentiator on their own, which you can either use directly, or otherwise derive for that purpose. If that’s the case, this is what I usually would prefer by default. One other aspect that I find important to understand about the `key` property is that it only has to be unique among its direct siblings, but it doesn’t have to be unique globally.

mediumdeviation 4y ago
Right, I'm not sure the author understands key either. It's an optimization to help React identify insertion / removal / reordering of array items between re-render. https://beta.reactjs.org/learn/rendering-lists#where-to-get-your-key https://beta.reactjs.org/learn/rendering-lists#where-to-get-... Giving every item a new key on every update does not help with that - in fact it is likely strictly worse than just using index since it will cause every item to re-mount every update https://beta.reactjs.org/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key https://beta.reactjs.org/learn/preserving-and-resetting-stat... which is unlikely to be what you want.
- Swizec 4y ago
  > Giving every item a new key on every update does not help with that fwiw the author specifies says not to do this. The advice is to generate a unique ID when items are created, not when they’re rendered.
  - isleyaardvark 4y ago
    I was going to reply the same thing. I do have a problem with the author presenting that as a default solution instead of a workaround if the item doesn't have a unique identifier, which I have found to be uncommon.
- orangepanda 4y ago
  Its not an optimisation, its about state management. React can’t see the difference between a reorder and remove&insert. When reordering items the state should be moved as well; when removing and inserting a new item, state should reset. Using an array index is equivalent to silencing the error
  - thrashh 4y ago
    Not necessarily. It depends on what your data source is. If it’s a stable sorted list that only ever gets appended at the end, you can use the index. At the end of the day, there is no hard fast rule for the key. You have to know what your data source is. You have to know what you’re doing.
- deleted 4y ago
  [deleted]
suzzer99 4y ago
So what's the problem with using index then?
- jallen_dot_dev 4y ago
  If the items can be re-ordered (like prioritizing todos in a todo list) then items' keys will change when they should be stable.
nicoburns 4y ago
You're better off not using a key than using a random one (unless the random key is kept stable accross re-renders)
jallen_dot_dev 4y ago
> such a technique should only be necessary if the items don’t come with unique and stable ids on their own. FWIW, these tips are also covered in his React course and he makes it clear in the course that this key generation technique should only be done when items don't have something better to use as the key. I think the blog post is just missing that context.
smcnally 4y ago
Even when not optimal, it’s good advice for the Intended audience “still pretty early in their journey” > crypto.randomUUID is a method built into the browser (it's not a third-party package). It's available in all major browsers. It has nothing to do with cryptocurrencies
3np 4y ago
Yeah, and even lacking appropriate IDs, hashing the object can often (but not always) be more appropriate than a random ID.
quickthrower2 4y ago
If desperate use the index supplied with map, if the order is stable enough.
ly3xqhl8g9 4y ago
From the article: "[The crypto module is] available in all major browsers. It has nothing to do with cryptocurrencies." Funny, but sorry state of affairs: we need a new word for cryptography [1]:: mysticography [2]? "About 1 results" in Google Search, that's a first. [1] https://www.etymonline.com/search?q=cryptography https://www.etymonline.com/search?q=cryptography [2] https://en.wiktionary.org/wiki/%CE%BC%CF%85%CF%83%CF%84%CE%B9%CE%BA%CF%8C%CF%82 https://en.wiktionary.org/wiki/%CE%BC%CF%85%CF%83%CF%84%CE%B...

by jotaen 4y ago

mediumdeviation 4y ago

Right, I'm not sure the author understands key either. It's an optimization to help React identify insertion / removal / reordering of array items between re-render. https://beta.reactjs.org/learn/rendering-lists#where-to-get-your-key https://beta.reactjs.org/learn/rendering-lists#where-to-get-... Giving every item a new key on every update does not help with that - in fact it is likely strictly worse than just using index since it will cause every item to re-mount every update https://beta.reactjs.org/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key https://beta.reactjs.org/learn/preserving-and-resetting-stat... which is unlikely to be what you want.

Swizec 4y ago
> Giving every item a new key on every update does not help with that fwiw the author specifies says not to do this. The advice is to generate a unique ID when items are created, not when they’re rendered.
- isleyaardvark 4y ago
  I was going to reply the same thing. I do have a problem with the author presenting that as a default solution instead of a workaround if the item doesn't have a unique identifier, which I have found to be uncommon.
orangepanda 4y ago
Its not an optimisation, its about state management. React can’t see the difference between a reorder and remove&insert. When reordering items the state should be moved as well; when removing and inserting a new item, state should reset. Using an array index is equivalent to silencing the error
- thrashh 4y ago
  Not necessarily. It depends on what your data source is. If it’s a stable sorted list that only ever gets appended at the end, you can use the index. At the end of the day, there is no hard fast rule for the key. You have to know what your data source is. You have to know what you’re doing.
deleted 4y ago
[deleted]

suzzer99 4y ago

So what's the problem with using index then?

jallen_dot_dev 4y ago
If the items can be re-ordered (like prioritizing todos in a todo list) then items' keys will change when they should be stable.

nicoburns 4y ago

You're better off not using a key than using a random one (unless the random key is kept stable accross re-renders)

jallen_dot_dev 4y ago

> such a technique should only be necessary if the items don’t come with unique and stable ids on their own. FWIW, these tips are also covered in his React course and he makes it clear in the course that this key generation technique should only be done when items don't have something better to use as the key. I think the blog post is just missing that context.

smcnally 4y ago

Even when not optimal, it’s good advice for the Intended audience “still pretty early in their journey” > crypto.randomUUID is a method built into the browser (it's not a third-party package). It's available in all major browsers. It has nothing to do with cryptocurrencies

3np 4y ago

Yeah, and even lacking appropriate IDs, hashing the object can often (but not always) be more appropriate than a random ID.

quickthrower2 4y ago

If desperate use the index supplied with map, if the order is stable enough.

ly3xqhl8g9 4y ago

From the article: "[The crypto module is] available in all major browsers. It has nothing to do with cryptocurrencies." Funny, but sorry state of affairs: we need a new word for cryptography [1]:: mysticography [2]? "About 1 results" in Google Search, that's a first. [1] https://www.etymonline.com/search?q=cryptography https://www.etymonline.com/search?q=cryptography [2] https://en.wiktionary.org/wiki/%CE%BC%CF%85%CF%83%CF%84%CE%B9%CE%BA%CF%8C%CF%82 https://en.wiktionary.org/wiki/%CE%BC%CF%85%CF%83%CF%84%CE%B...