You can't imagine how useful this learning about the proper use of useMemo and useCallback will be for me in the React project that I have currently taken on. Thank you very much for sharing this knowledge.
Very elite content! I read the book a couple of weeks back and I still go back to it when im working! Congratulations Nadia! Anyone reading this buy the book! even if you are advanced in react you won't regret it!
Your book is always on my desk & has been a great help in my react journey. By far the best resource on advanced react concepts & deep dives. Exiting to see this in video form aswell. Keep up the good work !!
These videos are incredible thanks! I feel like I'm unlocking the secrets to the universe. Definitely will share these with others any time I see these in the wild!
Thank you for all your efforts in these videos! I purchased the digital version of your book, but I find it much easier to learn things when they are in a video format. These videos are amazing resources
Great video, thank you! Will spread it further in my network. What I'm missing in this topic - mentioning at least custom prop comparison function for React.memo
I am new to react and I have been dealing with "JSX Elements should be enclosed by usememo/memo if used as a prop", and now thanks to you, I am a bit close to understanding how to fix it! Thanks!!
Great series, I keep coming back to it time and time again. At 9:12 you mention if a component is wrapped in React.memo and it's re-render is triggered by the parent and "only" by the parent, then React won't re-render the memoized component. I may be misunderstanding, but is that to suggest that if state changes higher up in the element tree where 'Parent' is used, that the memoized component (MemoChild) will always re-render?
Ah, no :) If the re-renders come from parent of the parent, the same rules apply. If the memoization is correct, then the memoized component won't re-render. By "parent and only parent" I meant that memoization won't prevent re-renders that originated from state change inside the MemoChild itself, and the context changes if MemoChild uses Context.
Loved the advanced series 🤩 thank you 🙏🏼 For the next videos, can you show how did you reach some of the less obvious conclusions? For example how useMemo is built under the hood. How do you measure things, like the comparison between running JS code and rendering. Thanks again for the awesome content
Thank you for the kind words! 😊 And fair questions. Not sure whether we need a video for that through, should be easy to answer them here :) The easiest way to measure the running js is to use performance.now() - save it to a variable before and after the operation, and the difference between them will be the cost of the operation. For measing how long the render of a render tree will take, can use React Profiler component: react.dev/reference/react/Profiler#measuring-rendering-performance-programmatically As for how useMemo is built - I just went through React code and traced those hooks to their source. github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L2680
Cool thanks! Not sure if it’s in scope. But explaining React internally will be amazing. For example, how useMemo works by reviewing the actual code. (Like the link you sent above)
9:43 Please tell me why need to wrap props in useMemo for memoization, because according to episode 1 when props change will not make component re-render?
But if the state of the parent component changes, it will. So if you want to prevent rerenders of child because of the parent, you'd have to wrap child in memo and memoize its props
@@developerwaypatterns Oh I see, so to avoid misunderstanding that this conflicts with the knowledge in episode 1, I think you should explain more clearly. Videos 3 and 4 are really a bit confusing and can be combined into one. In addition, the knowledge you teach is extremely wonderful, something that no one has ever told me, it makes me understand ReactJS better. Thank you very much.
In the first case, useCallback is used on a prop of a non-memoized component (button) In the second, it's used on a prop of a memoized component (MemoChild)
Hey Nadia, well researched and advanced video. I wanted to double check the scenario where you pass a MemoizedChild to a Memoized parent. The child didn’t re-render when the parent re-rendered. But when I passed a none Memoized child, the child re-renders. Did something change?
I think I understand now. Passing a memoized child to a memoized parent will not prevent the parent from re-rendering, because the child object is recreated every time the component containing the memoized parent is re-rendered
@@developerwaypatterns Yes. Usecases, patterns, pitfalls, pros and cons... There's a whole course on this with heavy usage of Children API :) ua-cam.com/video/iOSKV2rmj-A/v-deo.html
Personally, I would recommend against using that :) It makes code too fragile and complicated, much harder to understand and modify. Not to mention that in the docs, it's marked as "legacy", so I guess React team will start supporting it at some point.
Thank you so much for this awesome video. You're awesome, keep doing what youre doing. Looking forward to your udemy course.... one day soon i hope! I think its time i buy your book... any discount codes going?
I had a doubt from the first video. normally that button is needed to be placed in a Nav component somewhere else in the app tree. Then how do we show nd hide the modal efficiently then
So useCallback is useless most of the time, it’s only useful if your child component that you’re passing the callback function to is itself memorized with react.memo or if the child component has a useEffect with dependency on the callback passed from parent, so you don’t want the useEffect in the child to run again
This is why I seldom if at all use memoization in React: your code has to adhere to several conditions that only introduce complexity. Besides, like Nadia says, there are few exceptions that require for any kind of memoization. Now we are getting to server-side rendering and server-side calculations, meaning the client should not be responsible for the burden of retaining or calculating such data. And, if all that fails, get ready for React 19.1 or whatever will come with the Forget Compiler.
As a best practise if readability is not a concern, would you recommend we just memo everything without thinking too much? Practically it's almost impossible when doing a code review and check if memorization is broken or not so....
I personally wouldn't, but I know a few people who memoize all props to make it easier to review/remove cognitive load. In theory, memoizing everything can have a performance impact on the initial render. But it's hard to predict how much, and it will highly depend on how large and complicated your app is.
I recently faced a challenge where I had to push multiple input fields for each alphabet I type, like to color each alphabet I type differently, initially it works fine using ref I move focus to the next input field, the problem happens when I type faster, and the next input field is not mounted as soon as the key is pressed and the ref tries to focus it but doesn't find it. Basically the input field takes some ms to mount but the key presses are really fast, can you address if there's a completely different approach on how we can make dynamic elements outside the state management of react to make it faster?
Sorry, I don't understand why you memorized children's props. When the parent component hasn’t any props the children's props don't change and only the parent re-renders every time
I think you're wrong about the children being a new prop and therefore causing re-renderings. Check "before you memo" article by Dan. React does not re-render children prop if it hasn't changed. What I'm missing in this video is by how much would the app performance degrade if you use let's say 1000 useless useCallbacks and useMemos. The code bases are already inflated, wrapping things with memoized callbacks IMO doesn't make it much worse
I though I was a senior dev but this popped my bubble real fast 🤣 but in all seriousness, who the hell is designing this thing? This is not a library it’s a minefield. God I miss VueJS
You are doing a good job, but this series only convinces me React should never be used in serious projects. Developer job is to solve business logic problems, not to deal and waste time on this crappy patterns that framework by itself should solve. This default reactivity that React gives you out of the box (in comparison to other frameworks), can really produce some headaches. Luckily, there are announcements React 19 will deal with this, but still i'm not optimistic...
All of these concepts should be second nature to a capable developer, While yes some of the other frameworks have designed better reactive systems, but being completely oblivious to how things actually work will always bring issues whichever framework or language you use
Please, don't stop these amazing videos
You can't imagine how useful this learning about the proper use of useMemo and useCallback will be for me in the React project that I have currently taken on. Thank you very much for sharing this knowledge.
Glad it's useful! 😊
Very elite content! I read the book a couple of weeks back and I still go back to it when im working! Congratulations Nadia! Anyone reading this buy the book! even if you are advanced in react you won't regret it!
♥️😊
Like how????? How much efforts you have taken so far! You are gem !!!
Too much 😅
Your book is always on my desk & has been a great help in my react journey. By far the best resource on advanced react concepts & deep dives. Exiting to see this in video form aswell. Keep up the good work !!
Thank you, great to hear! ❤️ Hope the videos are going to be as useful as the book 😊
You have a heart of gold, sweetie. You helped me make my code better throughout all of my nextjs apps. A true master ❤
Thank you for delivering so much high-quality free content. You are my inspiration as always!
😊
These videos are incredible thanks! I feel like I'm unlocking the secrets to the universe. Definitely will share these with others any time I see these in the wild!
Wooow , simple , striaghtforward , please keep posting more videos about react and performance 🙏
Much love from Italy! So underrated channel, I will share your content with my colleagues! Keep up the amazing work Nadia
Thank you! ❤️ Much love back :)
Thank you for all your efforts in these videos! I purchased the digital version of your book, but I find it much easier to learn things when they are in a video format. These videos are amazing resources
best react content 🔥
😊😊
Amazing content, one of the easiest explanations of memoization!
Thank you! 🙏🏽
I was always searching for this content, and I finally found it.
Thank you so much!
Serendipity! 😊😅
Just waiting for the next episode, I just love watching them, so much to learn from your teaching. Kudos to you!!
Glad it's useful! ♥️😊
Amazing content. Best React content by far.
Great insights on React memoization! Clear explanations help optimize code effectively. 👍
i was looking forward your new video, it worth to waited, best performance react content, keep them as long as possible🔥
Thank you! 😊 ❤️ That's the goal
Great video, thank you! Will spread it further in my network. What I'm missing in this topic - mentioning at least custom prop comparison function for React.memo
I'll cover it in one of the episodes further. But in short, I don't recommend using it, it's a massive footgun
Thank you so much! This is very helpful! Thank you for all these animations with cats either
Absolutely amazing ❤
Amazing content👏
I am new to react and I have been dealing with "JSX Elements should be enclosed by usememo/memo if used as a prop", and now thanks to you, I am a bit close to understanding how to fix it!
Thanks!!
Отличный материал! Спасибо, за то что Вы делаете
Like always Amazing!
great content!!!
please, dont stop!!!
Great series, I keep coming back to it time and time again.
At 9:12 you mention if a component is wrapped in React.memo and it's re-render is triggered by the parent and "only" by the parent, then React won't re-render the memoized component. I may be misunderstanding, but is that to suggest that if state changes higher up in the element tree where 'Parent' is used, that the memoized component (MemoChild) will always re-render?
Ah, no :) If the re-renders come from parent of the parent, the same rules apply. If the memoization is correct, then the memoized component won't re-render.
By "parent and only parent" I meant that memoization won't prevent re-renders that originated from state change inside the MemoChild itself, and the context changes if MemoChild uses Context.
your videos are amazing.
thank you for your hard work.
please keep them going.
Thank you! 😊♥️
very enlightening, thank you!
Loved the advanced series 🤩 thank you 🙏🏼
For the next videos, can you show how did you reach some of the less obvious conclusions?
For example how useMemo is built under the hood.
How do you measure things, like the comparison between running JS code and rendering.
Thanks again for the awesome content
Thank you for the kind words! 😊 And fair questions. Not sure whether we need a video for that through, should be easy to answer them here :)
The easiest way to measure the running js is to use performance.now() - save it to a variable before and after the operation, and the difference between them will be the cost of the operation.
For measing how long the render of a render tree will take, can use React Profiler component: react.dev/reference/react/Profiler#measuring-rendering-performance-programmatically
As for how useMemo is built - I just went through React code and traced those hooks to their source. github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js#L2680
Cool thanks!
Not sure if it’s in scope.
But explaining React internally will be amazing.
For example, how useMemo works by reviewing the actual code. (Like the link you sent above)
@@razik91 I'll think about it, might be a good idea 🤔
@@developerwaypatterns 🙌🤓
Very good content, thank you!
As usual, very helpful ,
impresionante!!!, gran contenido. Gracias.
Please , dont stooppppp !!! You're f*cking amazing !!!
perfect!!!
Thank you bro 🥳🥳🥳🥳
9:43 Please tell me why need to wrap props in useMemo for memoization, because according to episode 1 when props change will not make component re-render?
But if the state of the parent component changes, it will. So if you want to prevent rerenders of child because of the parent, you'd have to wrap child in memo and memoize its props
@@developerwaypatterns Oh I see, so to avoid misunderstanding that this conflicts with the knowledge in episode 1, I think you should explain more clearly.
Videos 3 and 4 are really a bit confusing and can be combined into one.
In addition, the knowledge you teach is extremely wonderful, something that no one has ever told me, it makes me understand ReactJS better.
Thank you very much.
Great video, thanks a lot!!!
thank you
hi, still a little confuse, At 7:42 it useless to use useCallback but at 12:41 useCallback seem right to children only?
In the first case, useCallback is used on a prop of a non-memoized component (button)
In the second, it's used on a prop of a memoized component (MemoChild)
may I know the name of the visual animation tool used in this video? looks amazing and simple to understand the codes
It's a combination of keynote and final cut pro
So, the only purpose of memoization with useCallback is to preserve the reference and not preventing a bunch of functions from executing needlessly?
To preserve the reference, yep
Hey Nadia, well researched and advanced video. I wanted to double check the scenario where you pass a MemoizedChild to a Memoized parent. The child didn’t re-render when the parent re-rendered. But when I passed a none Memoized child, the child re-renders. Did something change?
I think I understand now. Passing a memoized child to a memoized parent will not prevent the parent from re-rendering, because the child object is recreated every time the component containing the memoized parent is re-rendered
Thank you. Any ideas about making a video on React.Children? :)
You mean this? react.dev/reference/react/Children
Anything specific you're looking for?
@@developerwaypatterns Yes. Usecases, patterns, pitfalls, pros and cons... There's a whole course on this with heavy usage of Children API :)
ua-cam.com/video/iOSKV2rmj-A/v-deo.html
Personally, I would recommend against using that :) It makes code too fragile and complicated, much harder to understand and modify. Not to mention that in the docs, it's marked as "legacy", so I guess React team will start supporting it at some point.
@@developerwaypatterns :((
Thank you so much for this awesome video. You're awesome, keep doing what youre doing. Looking forward to your udemy course.... one day soon i hope! I think its time i buy your book... any discount codes going?
Thank you for the kind words! 😊
Wait until Monday, I'll run a sale with good discount 😉
Nice content as always!
Does the book have any discount for countries with less valuable currency? (I'm from Brazil)
It has, the code is on the website, in the Q&A section :)
I had a doubt from the first video. normally that button is needed to be placed in a Nav component somewhere else in the app tree. Then how do we show nd hide the modal efficiently then
You can move the modal down as well. Unless you have to have it separately? it depends on your situation usually.
is there any coupon code available for book ..?
Yes, it's listed on the book's website, in the FAQ section
So useCallback is useless most of the time, it’s only useful if your child component that you’re passing the callback function to is itself memorized with react.memo or if the child component has a useEffect with dependency on the callback passed from parent, so you don’t want the useEffect in the child to run again
This is why I seldom if at all use memoization in React: your code has to adhere to several conditions that only introduce complexity.
Besides, like Nadia says, there are few exceptions that require for any kind of memoization. Now we are getting to server-side rendering and server-side calculations, meaning the client should not be responsible for the burden of retaining or calculating such data.
And, if all that fails, get ready for React 19.1 or whatever will come with the Forget Compiler.
I didn't know I was paying youtube gold to receive such a rich content
Noice video!
As a best practise if readability is not a concern, would you recommend we just memo everything without thinking too much?
Practically it's almost impossible when doing a code review and check if memorization is broken or not so....
I personally wouldn't, but I know a few people who memoize all props to make it easier to review/remove cognitive load.
In theory, memoizing everything can have a performance impact on the initial render. But it's hard to predict how much, and it will highly depend on how large and complicated your app is.
I recently faced a challenge where I had to push multiple input fields for each alphabet I type, like to color each alphabet I type differently, initially it works fine using ref I move focus to the next input field, the problem happens when I type faster, and the next input field is not mounted as soon as the key is pressed and the ref tries to focus it but doesn't find it. Basically the input field takes some ms to mount but the key presses are really fast, can you address if there's a completely different approach on how we can make dynamic elements outside the state management of react to make it faster?
Would be great if you could reproduce this in codesandbox
wow
3:31 у вас помилка, має бути false a є true в субтитрах
There is neither true no false at that time? 🤔
@@developerwaypatterns sorry, 3:28
Sorry, I don't understand why you memorized children's props. When the parent component hasn’t any props the children's props don't change and only the parent re-renders every time
To prevent memoized component with children from re-rendering
I think you're wrong about the children being a new prop and therefore causing re-renderings. Check "before you memo" article by Dan. React does not re-render children prop if it hasn't changed.
What I'm missing in this video is by how much would the app performance degrade if you use let's say 1000 useless useCallbacks and useMemos.
The code bases are already inflated, wrapping things with memoized callbacks IMO doesn't make it much worse
I love your videos. More money for me $$$$
I though I was a senior dev but this popped my bubble real fast 🤣 but in all seriousness, who the hell is designing this thing? This is not a library it’s a minefield. God I miss VueJS
😅
You are doing a good job, but this series only convinces me React should never be used in serious projects. Developer job is to solve business logic problems, not to deal and waste time on this crappy patterns that framework by itself should solve. This default reactivity that React gives you out of the box (in comparison to other frameworks), can really produce some headaches. Luckily, there are announcements React 19 will deal with this, but still i'm not optimistic...
All of these concepts should be second nature to a capable developer, While yes some of the other frameworks have designed better reactive systems, but being completely oblivious to how things actually work will always bring issues whichever framework or language you use
Skill issues lol
Like always Amazing!