The mystery of React key: how to write performant lists
Vložit
- čas přidán 2. 08. 2024
- 👉 Advanced React Book: www.advanced-react.com
👉 Comprehensive guide on React re-renders (www.developerway.com/posts/re...)
👉 How to useMemo and useCallback: you can remove most of them (www.developerway.com/posts/ho...)
👉 React key attribute: best practices for performant lists (www.developerway.com/posts/re...)
💬 Twitter: / adevnadia
💬 Linkedin: / adevnadia
👩🏼💻 Static list with items, memorized and not: codesandbox.io/s/static-list-...
👩🏼💻 Dynamic list with "key" as the index or as "id": 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
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.
Maybe it will change with the number of subscribers growing 🤞🏼
Your videos are gold, mate 👏Very few creators go so deep into how React really works.
Don't stop these videos.
Your articles and these videos are great!
Thank you for this video !
Key also can be used for a Div, that you can force refender if needed
Yep, it can be used for any element
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" ).
Haha, I'm working on the book like that right now, struggling with the title, and this one is brilliant! Can I use it if I don't come up with something better?
@@developerwaypatterns I am afraid I wouldn't be the right person to ask for such a favor ). I was just coming from Kyle Simpson's bestseller series of "You don't know JS yet". It just seemed to me that you, two are using similar approach ).
@@elik3765 oops, taken then 😅Forgot about that one
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.
Yep, agree on both 🙂
Thank you very much for your work! Your content is very good and very underrated by the community!
the only video you ever need!!
Love these videos
That's a great explanations of React Keys!
Your videos are a goldmine. Here, you dropped this: 👑
excellent video
This video built a new mental model for me
True Gem
👏👍
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.
In that case it's easier just to use array's index, it's also guaranteed to be unique. With Math.random the problem is not only bad performance, but also it's a source of bugs. If your components in the list are focusable or have internal state, they will reset it with every re-render because of Math.random(). It won't happen with array's index.
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.
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
Heya! I'm not sure I understand the question, can you be a bit more specific? 🤔
@@developerwaypatterns on 11:23 you say that Array can be dynamic (without local state or React.memo in items), you mean that you can use indexes as keys if items (components) are not wrapped in React.memo or not using local states inside, if I understood correctly. But what does stop us from using indexes as keys if items actually will have local state or will be wrapped in React.memo?
Nothing stops us, it's just you'll see weird bugs if those items are added/removed/re-ordered: state will be preserved based on the arrays's index. Same with React.memo - it will just not work if the items are re-ordered/added/removed from the middle of the array.
I had a video on Reconciliation that digs deeper into the reasons for the behaviour, if you want to understand more how all of this works: czcams.com/video/724nBX6jGRQ/video.html
like+comment+subscription =) Thanks for the content!
Having a better intro soundtrack would be great.
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?
This might be helpful to understand those: react.dev/learn/synchronizing-with-effects
@@developerwaypatterns Thanks