The mystery of React key: how to write performant lists

React “key” attribute is probably one of the most “autopilot” used features in React 😅 Who among us honestly can say that they use it because of “…some valid reasons”, rather than “because eslint rule complained at me”.

And I suspect most people when faced with the question “why does React need “key” attribute” will answer something like “errr… we’re supposed to put unique values there so that React can recognise list items, it’s better for performance”. But did you know that:

* We can't put any unique value there - a disaster will occur if we do it wrong
* Key has nothing to do with re-renders and doesn't prevent them in any way?
* Array "index" as a key is not a disaster or bad practise, and can be used. Sometimes.

In this video, looking into:

* Why do we need the "key" attribute in React at all
* What happens if I put some random value there
* What makes a good "key"?
* How to make lists as performant as they can be and prevent re-renders of their items
* What will happen if we use array's "index" as key and why
* How to use "key" to reset state

#react #reactjs #webdevelopment #programming #frontend #frontenddeveloper #js #javascript

[AbhishekPathak]

It's sad that deep and insightful videos like this don't show up in youtube search (came here from articles) and instead shows list of videos that all teach only basics.

[JustSkillGG]

Don't stop these videos.
Your articles and these videos are great!

[newaroundhere]

Your videos are gold, mate 👏Very few creators go so deep into how React really works.

[elik]

Coming here from your articles. It's amazing how you merge a reader to a lower-level abstraction with very affordable tools, bit by bit. When I read your articles I sense that there should be a book named "You don't know React yet" ).

[mldddd]

Very well made video!
I think there is another use case for "using array index as key":
- Array is dynamic (items CAN have local state & no React.memo) but you only ADD to Array (no re-order, no remove).

That said, I would still recommend having unique ids as keys when possible, not index.

[mountakhabi]

Thank you for this video !
Key also can be used for a Div, that you can force refender if needed

[satejbidvai]

Your videos are a goldmine. Here, you dropped this: 👑

[HDdeiu]

Thank you very much for your work! Your content is very good and very underrated by the community!

[指数函数没有极值]

This video built a new mental model for me

[metalyx]

That's a great explanations of React Keys!

[loiatqd]

Some awkward cases I met was after every re-render I see more elements than it should when there’re some duplicated keys. E.g array has 10 values but after first re-render it becomes 12, 14, 16, … because some keys are duplicated (not unique). That’s why when I’m not sure which field is unique from the external source, I’ll just use key={Math.random()} and fuck the performance because an unnoticeable bad performance is better than an obvious bug that 10 elements shown as 12.

[lovikuanyshev]

Excuse me, I didnt get an argument about using dynamic array (without local state and React.memo)
How does it allow us to use index as a key? can you please answer it deeply, maybe Im missing something

[Zloy_jid]

like+comment+subscription =) Thanks for the content!

[jn]

Having a better intro soundtrack would be great.

[developer_]

Thanks for such a clear and concise explanation of this topic. I recently found your blogs... all are top-notch. Thanks for sharing your knowledge.

[developer_]

Hi, can you please help me in understanding what side-effects mean in react? When we say side-effects happen in the context of react component what does it mean. Does it mean it depends on other components or something change outside of its scope?