feat: improve performance using uuid in key instead index array position #3
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Hi!
Thanks for your contribution. Using the array index as the component key is not a best practice definitely, however, I have some doubts regarding the proposed alternative. I have left some comments regarding these doubts in order to discuss them 😊
Thanks!!
| @@ -43,11 +43,17 @@ export function Carousel({ | |||
| scrollSliderPrevious(slider); | |||
| } | |||
|
|
|||
| function uuid() { | |||
| return ( | |||
| Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15) | |||
There was a problem hiding this comment.
Have you considered using crypto.randomUUID? Does it has any downside for this purpose?
There was a problem hiding this comment.
Of course, my first option was that, but maybe in local develop crypto web api will not work because only runs in secure contexts (https)
| {children.map((child, index) => ( | ||
| <div key={index} className="carousel__slide"> | ||
| {children.map((child) => ( | ||
| <div key={uuid()} className="carousel__slide"> |
There was a problem hiding this comment.
Based on this, should not we avoid calling the uuid() function while returning the component?
There was a problem hiding this comment.
you're right, in this case we could use a simple implementation, like this:
{children.map((child, index) => (
<div key={`carouselItem${index}`} className="carousel__slide">
{child}
</div>
))}interpolate the index list with a generic string
No description provided.