Thank you for explaining the myth about props changes not triggering re-render. I've been confused about this for a long time and finally many things become clearer.
when i stuck on how to improve my react code i come across your video, after watching that video i started seeing from your first one. going to see all and implement in my code and after reading comment i found out you have a blog also going to watch that. i will appreciate you content more often.
Congratulations Nadia fo your first video! Your articles help me a lot to dive in more advanced React concepts and improve my understanding of what I do! So it's nice that you've decided to transpile them into videos! Thank you! Look forward for the next!
You deserve a lot of appreciation for what you doing Nadia ! Thanks a lot for sharing this amount of knowledge at free of cost. Just recently find out one of your Article through my friend, Now i'm really a fan of your Articles and obviously reading and Watching both formats are very useful for someone like me who prefers both formats of learning, It helps me to dive deep in to the topic. Keep doing the good work, Nadia. You are doing Great :) 👍👍
the article that points to this video is a top notch explanation of re-renders I have seen. (can't wait an article about useEffect if you plan to do such)
Thank you so much for doing this Nadia. Your written content is by far the best I've ever seen online, so I'm really looking forward to more videos from you! Good luck and have a nice one!
Thanks for the video, I already read articles from your blog, I find them very instructive. Concerning the source myth of "re-render because props changed", I think that it is originated from the react-dev-tools plugin when inspecting performance via the profiler, this sentence "props changed" appears when we activate the option display why the component re-rendered.
Hello Nadia. Thank you a lot. I was struggling a lot on « Raw » React. I will read and watch carefully your blog posts/RUclips videos. Amazing work. I'm almost sure it will help me a lot to understand the semantic of React and its runtime. This is awesome, you’re truely an incredibly skilled dev.
Excelent articles and tutorials. I believe many ( myself included ) appreciate your effort on delivering high quality content. I just started in a new project as a front-end developer ( my background is strictly back-end) and I have to say, your videos has really helped me out a lot! Keep up the good work, and good luck to you ❤
You're so inspiring dear Nadia. such a clear explanation! I also appreciate your effort and time in those neat animations to make your content appeal visually.
One way to do it, yet. There are other techniques as well, like leveraging Context (or any Context-like state management libraries) or composition. Other videos and this guide www.developerway.com/posts/react-re-renders-guide and other articles in the blog could be helpful to understand those.
Nadia, I didn't quite get the part about the Context. When you say NonChildComponent is not a child of the ComponentWithProvider, did you mean it's not a direct child? It's a deep down descendant. Because I thought only descendants of a Provider can get the value using useContext, right?
Can you like the timestamp? It's quite an old video, don't remember already what was there 😅 But most likely I meant that it's not rendered as a nested component, it's passes as props - so it's not affected by re-renders. In the newer videos, the Advanced React course, the first few cover that difference and the behaviour when it comes to re-renders
that's totally understandable. i think i got it, you probably meant not a direct child. but, it was at around @7:38, the part about context causes rerenders. thx
So, to make it clear, am I right that child component is rerendered when their props linked to some upper state change and not just any values as in your first example with "let value = 1" ? In case Child component doesn't expect any props it will still be rerender when its parent starts rerendering. So If we wrap this Child component which doesn't except any props in react.memo it won't rerender, but if it expects some prop linked to outer state it will rerender and in this case it is not because of Parent rerender, but because of props changing, right? Doesn't it tell us that props still can trigger rerender? Btw, I've asked chatgpt about this and it made a conclusion. Conclusion: Yes, props can trigger a re-render in components wrapped with React.memo, especially when those props are linked to state changes in a parent or ancestor component. The distinction is that in components not wrapped in React.memo, re-renders are a result of the parent re-rendering, whereas in components wrapped in React.memo, re-renders are specifically triggered by changes in the props themselves.
But you can't trigger props change without a change in parent's state. If those props that are linked to state change, that means that the state changed - and re-render is triggered by the state update
Hey Developer way , Thanks for the informative video. Can you make a video on how useDebounce hook words? It can be great example for me/us to understand , like how parent re-render , propogates to child. Thanks
I think even the state change will not trigger re-render as long as you don't call setState(). If you will change the state directly the way you did it with props like state = 'something' it will not cause re-render. It is the expression "state change" that is misleading, but it should be a mutation through setState(). Yeah, but I also have no idea why they always mention props change, even AI based chatbots like Bard/ChatGPT
Hmm, not really sure about this "prop changes myth". In this particular example you are using primitive values, and that makes sense, but what about non-primitive values as props? Even you are using "prop changes" explanation as a reason for re-rendering in your useCallback video. Maybe you can elaborate on that? :)
Props change only matters when a component is wrapped in React.memo. This is when we need to use useCallback to memoize non-primitive props like objects.
This video is cool, but props changing does cause a re-render. That is not a myth. Otherwise, if we changed the value of a prop in React dev tools, we wouldn't see a change in the UI. If a component has it's props updated, it will re-render.
Not exactly :) If you can change a prop in dev tools and UI changes, it means that dev tools are either maintaining state somewhere or just monkey-patching React itself. Currently, it's not possible to cause a re-render just from props change with "standard" React api. In order for props change to be picked up by the component, its parent component needs to re-render. And if parent component re-renders, its child will re-render regardless of its props. Whether they change or not won't matter, the child will re-render. The only time when props change matter is when the child component is wrapped in React.memo or useMemo - only then React won't re-render it right away, and check whether props change or not. If you want to see code examples for all those use cases, I have them here: www.developerway.com/posts/react-re-renders-guide
@@developerwaypatterns thanks for your videos. Got such question: You mentioned in post regarding list optimization next: " just providing key attribute will not improve lists' performance. To prevent re-renders of list elements you need to wrap them in React.memo and follow all of its best practices." And as I understood from your post the best practice is: "React.memo has to be applied to the elements passed as children/props. Memoizing the parent component will not work: children and props will be objects, so they will change with every re-render." So why in this example item prop is not memoized? items.map( (item) => (
@@ВасилийТеркин-п8ю It's because those items are either coming from props, statically defined, or they are in state (don't remember that particular example). In that case they don't need to be memorized - reference to them, and as a result - to every item in that array, will be the same between re-renders. If those items are dynamic, then they will be re-created, items inside will lose their reference, and you're right - they would have to be memoized. Example of what I mean by static here: codesandbox.io/s/jolly-lake-01v6vn?file=/src/App.tsx In the second example items are coming from props, so they are not affected by re-renders triggered by the state update inside List component.
Thank you for explaining the myth about props changes not triggering re-render.
I've been confused about this for a long time and finally many things become clearer.
when i stuck on how to improve my react code i come across your video, after watching that video i started seeing from your first one. going to see all and implement in my code and after reading comment i found out you have a blog also going to watch that. i will appreciate you content more often.
Stuck on a problem at work, this cleared up things a little - thanks! :)
I love your blog and I am delighted to see that you started a RUclips channel as well. Subscribed!
Congratulations Nadia fo your first video! Your articles help me a lot to dive in more advanced React concepts and improve my understanding of what I do!
So it's nice that you've decided to transpile them into videos!
Thank you! Look forward for the next!
Thank you! 😊
What a nice explanation with nice animations...
Learnt something new today...
Thanks
Your articles are gems and having your videos now it's soooo awesome! Thank you for the content and knowledge you share
Thanks for this useful knowledge that you are sharing , I'm a big fan of your blogs ❣
You deserve a lot of appreciation for what you doing Nadia ! Thanks a lot for sharing this amount of knowledge at free of cost. Just recently find out one of your Article through my friend, Now i'm really a fan of your Articles and obviously reading and Watching both formats are very useful for someone like me who prefers both formats of learning, It helps me to dive deep in to the topic. Keep doing the good work, Nadia. You are doing Great :) 👍👍
Thank you for the kind words! Really appreciate it 😊
the article that points to this video is a top notch explanation of re-renders I have seen. (can't wait an article about useEffect if you plan to do such)
Thank you!
I have a video on useLayoutEffect, it touches on useEffect a bit :)
Thank you so much for doing this Nadia. Your written content is by far the best I've ever seen online, so I'm really looking forward to more videos from you!
Good luck and have a nice one!
Awww, thank you!
This is going to be amazing, congratulations on your first video Nadia 🎉 .... wish you all the best
Thank you! 😊
Keep going. You have a very good way of explaining complex topics 👏👏
Thanks for the video, I already read articles from your blog, I find them very instructive. Concerning the source myth of "re-render because props changed", I think that it is originated from the react-dev-tools plugin when inspecting performance via the profiler, this sentence "props changed" appears when we activate the option display why the component re-rendered.
Very possible! Also in the old React docs I think it one of the statements: that component re-renders when its state or props changes
Hello Nadia. Thank you a lot. I was struggling a lot on « Raw » React. I will read and watch carefully your blog posts/RUclips videos.
Amazing work. I'm almost sure it will help me a lot to understand the semantic of React and its runtime. This is awesome, you’re truely an incredibly skilled dev.
Thank you! 😊
Excelent articles and tutorials. I believe many ( myself included ) appreciate your effort on delivering high quality content. I just started in a new project as a front-end developer ( my background is strictly back-end) and I have to say, your videos has really helped me out a lot! Keep up the good work, and good luck to you ❤
Thank you! ☺
Hi Nadia. Looking forward to your video's. Your articles are awesome 👍
Thank you! 😊
Great explanation ! Especially the last one on the myth about renders due to prop changes. 👏
Спасибо за видео уроки , решил проблему ре рендера в реальном проекте
Great explanation! Thanks!
Great video Nadia, keep up the good work of teaching the community 👍🏼
You're so inspiring dear Nadia. such a clear explanation! I also appreciate your effort and time in those neat animations to make your content appeal visually.
Very nice! I'm loving your videos. Thanks.
Omg, I didn’t know what I was doing wrong, thanks
Very helpful for fronend developer. Thank you 😊
очень круто! спасибо, Надя! cheers
Glad to be one of your earliest subscribers..
Let me say something - Its brilliant
Wish you all the best Nadia!
Спасибо большое за уроки и статьи! Безумно классная подача, мне очень помогло разобраться в этой теме!)
So we apply memo() and useMemo for child component to prevent its rerender when parent component rerenders?
One way to do it, yet.
There are other techniques as well, like leveraging Context (or any Context-like state management libraries) or composition. Other videos and this guide www.developerway.com/posts/react-re-renders-guide and other articles in the blog could be helpful to understand those.
Thanks a lot Nadia, keep doing!
Wonderful presentation - the cat diagrams really help 😅
😅 😺
Nadia, I didn't quite get the part about the Context. When you say NonChildComponent is not a child of the ComponentWithProvider, did you mean it's not a direct child? It's a deep down descendant. Because I thought only descendants of a Provider can get the value using useContext, right?
Can you like the timestamp? It's quite an old video, don't remember already what was there 😅
But most likely I meant that it's not rendered as a nested component, it's passes as props - so it's not affected by re-renders.
In the newer videos, the Advanced React course, the first few cover that difference and the behaviour when it comes to re-renders
that's totally understandable. i think i got it, you probably meant not a direct child.
but, it was at around @7:38, the part about context causes rerenders.
thx
Lovely video.
excellent video!
So, to make it clear, am I right that child component is rerendered when their props linked to some upper state change and not just any values as in your first example with "let value = 1" ? In case Child component doesn't expect any props it will still be rerender when its parent starts rerendering. So If we wrap this Child component which doesn't except any props in react.memo it won't rerender, but if it expects some prop linked to outer state it will rerender and in this case it is not because of Parent rerender, but because of props changing, right? Doesn't it tell us that props still can trigger rerender?
Btw, I've asked chatgpt about this and it made a conclusion.
Conclusion:
Yes, props can trigger a re-render in components wrapped with React.memo, especially when those props are linked to state changes in a parent or ancestor component.
The distinction is that in components not wrapped in React.memo, re-renders are a result of the parent re-rendering, whereas in components wrapped in React.memo, re-renders are specifically triggered by changes in the props themselves.
But you can't trigger props change without a change in parent's state. If those props that are linked to state change, that means that the state changed - and re-render is triggered by the state update
Excelent !
Thank you!
Thanks a lot Nadia
Hey Developer way , Thanks for the informative video. Can you make a video on how useDebounce hook words? It can be great example for me/us to understand , like how parent re-render , propogates to child. Thanks
It's on my todo list :)
@@developerwaypatterns let's gooooo.
I think even the state change will not trigger re-render as long as you don't call setState(). If you will change the state directly the way you did it with props like state = 'something' it will not cause re-render. It is the expression "state change" that is misleading, but it should be a mutation through setState(). Yeah, but I also have no idea why they always mention props change, even AI based chatbots like Bard/ChatGPT
Yep, all true :) Also, shows how careful we should be with whatever ChatGPT tells us 😅
Finally 🤩
😃
Nice, thx! Go on!)
Hmm, not really sure about this "prop changes myth". In this particular example you are using primitive values, and that makes sense, but what about non-primitive values as props? Even you are using "prop changes" explanation as a reason for re-rendering in your useCallback video. Maybe you can elaborate on that? :)
Props change only matters when a component is wrapped in React.memo. This is when we need to use useCallback to memoize non-primitive props like objects.
@@developerwaypatterns Tnx for a quick reply. Love your content btw. :)
Thank you! 😊
Дякую
This video is cool, but props changing does cause a re-render. That is not a myth. Otherwise, if we changed the value of a prop in React dev tools, we wouldn't see a change in the UI. If a component has it's props updated, it will re-render.
Not exactly :) If you can change a prop in dev tools and UI changes, it means that dev tools are either maintaining state somewhere or just monkey-patching React itself.
Currently, it's not possible to cause a re-render just from props change with "standard" React api. In order for props change to be picked up by the component, its parent component needs to re-render. And if parent component re-renders, its child will re-render regardless of its props. Whether they change or not won't matter, the child will re-render.
The only time when props change matter is when the child component is wrapped in React.memo or useMemo - only then React won't re-render it right away, and check whether props change or not.
If you want to see code examples for all those use cases, I have them here: www.developerway.com/posts/react-re-renders-guide
@@developerwaypatterns thanks for your videos. Got such question:
You mentioned in post regarding list optimization next: " just providing key attribute will not improve lists' performance. To prevent re-renders of list elements you need to wrap them in React.memo and follow all of its best practices."
And as I understood from your post the best practice is: "React.memo has to be applied to the elements passed as children/props. Memoizing the parent component will not work: children and props will be objects, so they will change with every re-render."
So why in this example item prop is not memoized?
items.map( (item) => (
@@ВасилийТеркин-п8ю It's because those items are either coming from props, statically defined, or they are in state (don't remember that particular example). In that case they don't need to be memorized - reference to them, and as a result - to every item in that array, will be the same between re-renders.
If those items are dynamic, then they will be re-created, items inside will lose their reference, and you're right - they would have to be memoized.
Example of what I mean by static here: codesandbox.io/s/jolly-lake-01v6vn?file=/src/App.tsx
In the second example items are coming from props, so they are not affected by re-renders triggered by the state update inside List component.
You are the best! 😀