The mystery of React key: how to write performant lists

👉 Advanced React Book: https://www.advanced-react.com

👉 Comprehensive guide on React re-renders (https://www.developerway.com/posts/re...)
👉  How to useMemo and useCallback: you can remove most of them (https://www.developerway.com/posts/ho...)
👉 React key attribute: best practices for performant lists (https://www.developerway.com/posts/re...)

💬 Twitter: Twitter: adevnadia
💬 Linkedin: LinkedIn: adevnadia

👩🏼‍💻 Static list with items, memorized and not: https://codesandbox.io/s/static-list-...
👩🏼‍💻 Dynamic list with "key" as the index or as "id": https://codesandbox.io/s/dynamic-list...

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