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.
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 ).
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.
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.
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
@@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: ruclips.net/video/724nBX6jGRQ/видео.html
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?
![Kumamoto Masters Japan 2024 | Gregoria Mariska Tunjung (INA) [5] vs. Akane Yamaguchi (JPN) [2] | F](http://i.ytimg.com/vi/EIjZybhsWqA/mqdefault.jpg)
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 🤞🏼
Don't stop these videos.
Your articles and these videos are great!
Your videos are gold, mate 👏Very few creators go so deep into how React really works.
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 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
Your videos are a goldmine. Here, you dropped this: 👑
This video built a new mental model for me
the only video you ever need!!
Thank you very much for your work! Your content is very good and very underrated by the community!
That's a great explanations of React Keys!
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.
excellent video
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.
Love these videos
True Gem
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: ruclips.net/video/724nBX6jGRQ/видео.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