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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-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?
