Please, never ever stop doing this! It's clear and explained in such a way that's easy and enjoyable to learn. Keep it up and thank you for sharing! 🤗🤗
@@developerwaypatterns I just woundering how did you get all this thing ? I just was googling for it and found your blog and videos but how did you learn it ?
Yeah! Your rock! There are tonnes of content for novices on UA-cam or the Internet and almost no content with advanced, "diving deep", "under the hood" stuff topics. And you provide clear explanation, code samples with code sandbox so we can play with it. There is no way we can't understand the topic. Thank you!
I love your articles and I very much appreciate you taking the time to make a video of some of your articles! The way you break down the concept is brilliant! Once again, thank you so much!
Your tutorials and articles are amazing and of deep knowledge. Can you please share how and what tools you use to create UA-cam videos? Really your explanations are too the point and simple.
I love your videos and blogs so much! Keep going and I will always support you! Btw, I really like your editor theme, do you mind to share with me? Thank you and happy coding!
That was clear and concise, thank you. Please, could you create those types of videos covering JavaScript object-oriented programming design patterns as well?
Thanks so much for creating this type of content, it's so engaging and interesting to watch. After watching this I became curious about the virtual dom, is there any way to see what it actually looks like in a real React app?
Hi Nadia, Thanks for such a beautiful explanation. I have a doubt regarding the calling the component function outside. Can't we just use a useCallback hook to store the same reference of the component?
If it doesn't depend on the state, then we indeed can, but what for? Much easier to move it outside. If it does depend on the state, then it will re-mount every time the state changes.
Hi Nadia, Awesome stuff like how updates happens under the hood. But I have one question, regarding the example that you have used here, (link of CodeSandbox), the state(input of tax) will only persists, because we are not using controlled input right? if we were to provide value prop for Input which we more likely are then this will not happen right? I do understand the point of this example is for you to explain how DOM nodes are compared, Still wanted to know more about this. Cheers
Yep, exactly! Controlled state will belong to the parent, so there will be no weird side-effects like that. It's just input is the easiest way to create a meaningful example of a component with local state :) But the same situation will be with anything that holds its own state that is not synced with the parent
Great explanation! Next time you can make a video explaining the differences between manipulating the real DOM and the Virtual DOM and how is the diff algorithm?
thank you so much for the video! i was just starting to study the source code of react and this helps a ton. i do have a question tho. is the diffing alg a part of fiber architecture?
Thank you so much, I think I have found a gem :) . Could you give more information about reactDom library vs react itself. As I know, reconcilation is done thanks to reactDom while diffing algorithm is handled by react library itself. When we do reactDom.render() all logic is started and reconcilation is started. Then, react element tree is created thanks to react library ( since there is a react.createElement ). What actually reactDom is doing? it just syncing real dom with virtual dom am I right? If so, reconcilation is handled by react library itself since it creates element trees? I am confused of that part
I came back to this video to clarify my understanding of React Reconciliation Algorithm and I have a question related to "Components inside other components" part of this video: Firstly, React will shallowly compare both React Elements by reference, since we have created a new React Component inside our current Component it will be recreated every re-render and the returning Element will be also always different, so this comparison will always return false. Also after watching your video "Elements, Children and Re-renders - Advanced React course, Episode 2" I found out that React won't trigger re-render if children React Elements are the same by reference and the only way to implement this is to use React Elements as props. React will compare them and will find out that they are the same and won't trigger re-render. My question is: If we will create React Component outside of the current Component it will save reference for the Component Function, but the returning Element will be always different and React Reconciliation will fail first shallow comparing, right? So whats the difference if we will declare React Component inside or outside of the current Component because anyway the returning React Element will have always different reference? Is it all about saving reference for the React Component Function? Thank you!
> Is it all about saving reference for the React Component Function? This is exactly right :) If the Element changes (as will happen in both cases), but the "type" property is the same (as will happen with the reference to it, if it's declared outside) - then the component, that is represented by that Element, will just re-render. If the "type" changes as well - as will happen if the component is declared inside, then the component will re-mount. I.e. it will be destroyed and re-created from scratch.
No, it's how javascript compares functions, objects and arrays (non-primitive values). It's happening not by their actual value, but by the reference to a value. So two identical arrays/functions/objects, when compared, will return false: ``` const a = [1,2]; const b = [1,2]; a === b; // will be false ``` Only if those variables are pointing to the same object, the comparison will be true: ``` const a = [1,2]; const b = a; a === b; // will be true ``` developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
@@developerwaypatterns Hmm, so the non-primitive values are passed by reference instead of a new copy of them. It finally clicks now :D I can't thank you enough 💚
Thanks for Great explanation , but want ask about create component inside another we can use useCallback to create component it works fun ?!! ex const CustomInput = useCallback(() => { console.log("rendering custom input"); return ; }, []);
Like this, without any dependencies - yep, but what for? :) And as soon as dependencies appear there, the component will be re-created and as a result - the same problem with re-mounting
If the state is controlled by the parent, then those input don't hold their own state. And for bug to be visible, inputs should have something that they control independent of the parent
Wow just yesterday I try to understand fiber tree data structure by asking chatgpt and today I found this video that explain it clearly better than chatgpt, thank you for creating this video 🫡
Please, never ever stop doing this!
It's clear and explained in such a way that's easy and enjoyable to learn.
Keep it up and thank you for sharing! 🤗🤗
Thank you! 😊
I agree, you have an amazing gift for teaching!
@@developerwaypatterns I just woundering how did you get all this thing ? I just was googling for it and found your blog and videos but how did you learn it ?
What a crazy fact with same key and conditional rendering with null!
Bravo 👏
Thank you for explaining these things
Yeah! Your rock! There are tonnes of content for novices on UA-cam or the Internet and almost no content with advanced, "diving deep", "under the hood" stuff topics. And you provide clear explanation, code samples with code sandbox so we can play with it. There is no way we can't understand the topic. Thank you!
I learned a lot from your posts and videos. Keep sharing your knowladge with us.
I love your articles and I very much appreciate you taking the time to make a video of some of your articles!
The way you break down the concept is brilliant! Once again, thank you so much!
Thank you, glad those are useful! 😊
Haven't seen such easy explained detailed video ever. Really helpful. Hope to have more like this.
Your videos and blog posts are just amazing keep up with the awesome job!
Thanks for the information it clears a lot of confusing concepts in react that may make juniors struggle ❤
Glad it was useful! 😊
And non-juniors to be honest. Loved this video.
I love your explanation, very clear and concise ❤
Amazing! That is the content I was looking for!
Thanks, your videos are always a pleasure to watch because I love under the hood stuffs and your delivery is very engaging.
Incredible explanation
This is simply the best explanation
Thank you so much, Nadezhda! The article is brilliant
You're amazing dude. Awesome explanation.
Thank you so much for this videos 💓💓💓
Really love your videos, thanks for the great work!
This was just amazing! subscribed.
One of the best explanation for reconciliation. I loved it. Thanks for your time
I'm impressed with React re-renders guide: everything, all at once that's why I came here, thanks for the content
is it your real voice or machine?
would appreciate if you can recommend any good book on react
kind of a deep dive like what you are doing
I'm about to release a book about exactly that in a few days, subscribe here: advanced-react.com/ :)
The voice is real :)
super helpful finaly have a better understanding of react reconcilliation
gold content.
thank you.
Muchas gracias por el contenido, que forma tan sencilla de explicar conceptos más avanzados
Amazing explanation ❤
amazing video! you have a great teaching style
Really very helpful video. lots of knowledge thanks for sharing with us ❤
i love so much your work. Thanks :D
amazing! Thank you so so much!
great job Nadia!
Большое спасибо за видео, очень интересно и познавательно. У вас хорошо получается доносить материал. И еще раз большое спасибо)
Glad you like it 😊
I am newbie to React so didnt't understand it completely as this seems advanced but I still got one aha moment.
Subbed! 🙌
Надя, спасибо, познавательно!
Your tutorials and articles are amazing and of deep knowledge.
Can you please share how and what tools you use to create UA-cam videos?
Really your explanations are too the point and simple.
Thank you! :)
I use Final Cut Pro and sometimes Keynote
Cool! Thanks!
I love your videos and blogs so much! Keep going and I will always support you! Btw, I really like your editor theme, do you mind to share with me? Thank you and happy coding!
Aww, thank you! 😊
It's not my editor, it's "Material" theme from carbon.now.sh/ 😅
But maybe can be installed in VSCode, don't know tbh
Thank you!
soo good!
That was clear and concise, thank you. Please, could you create those types of videos covering JavaScript object-oriented programming design patterns as well?
Thanks so much for creating this type of content, it's so engaging and interesting to watch.
After watching this I became curious about the virtual dom, is there any way to see what it actually looks like in a real React app?
The entire three you mean? No idea
But you can just console.log an element and see the type and the props and other things there
I couldn't understand this topic from react docs thank you so much
Thank you
this is god-tier
Thanks !
Thanks a lot for the video, as always instructing content. Just a question, what tool did you use to animate and display code examples ?
Thank you!
For animation - it's just Keynote :)
Hi Nadia, Thanks for such a beautiful explanation. I have a doubt regarding the calling the component function outside. Can't we just use a useCallback hook to store the same reference of the component?
If it doesn't depend on the state, then we indeed can, but what for? Much easier to move it outside. If it does depend on the state, then it will re-mount every time the state changes.
Hi Nadia, Awesome stuff like how updates happens under the hood. But I have one question, regarding the example that you have used here, (link of CodeSandbox), the state(input of tax) will only persists, because we are not using controlled input right? if we were to provide value prop for Input which we more likely are then this will not happen right? I do understand the point of this example is for you to explain how DOM nodes are compared, Still wanted to know more about this. Cheers
Yep, exactly! Controlled state will belong to the parent, so there will be no weird side-effects like that.
It's just input is the easiest way to create a meaningful example of a component with local state :) But the same situation will be with anything that holds its own state that is not synced with the parent
@@developerwaypatterns Great Thank you for getting back to me. And I am so glad I found your article/blogs they are just nuggets of gold. Cheers
Great explanation! Next time you can make a video explaining the differences between manipulating the real DOM and the Virtual DOM and how is the diff algorithm?
Thank you! I'll add this to my todo list, great idea :)
god tier!
thank you so much for the video! i was just starting to study the source code of react and this helps a ton. i do have a question tho. is the diffing alg a part of fiber architecture?
It's implemented and used in fiber architecture, yep, but it existed before it. And not necessarily tied to it, other frameworks can use it as well.
@@developerwaypatterns gotcha thank you :)
Thank you so much, I think I have found a gem :) . Could you give more information about reactDom library vs react itself. As I know, reconcilation is done thanks to reactDom while diffing algorithm is handled by react library itself. When we do reactDom.render() all logic is started and reconcilation is started. Then, react element tree is created thanks to react library ( since there is a react.createElement ). What actually reactDom is doing? it just syncing real dom with virtual dom am I right? If so, reconcilation is handled by react library itself since it creates element trees? I am confused of that part
Quality content
thx!
I came back to this video to clarify my understanding of React Reconciliation Algorithm and I have a question related to "Components inside other components" part of this video:
Firstly, React will shallowly compare both React Elements by reference, since we have created a new React Component inside our current Component it will be recreated every re-render and the returning Element will be also always different, so this comparison will always return false.
Also after watching your video "Elements, Children and Re-renders - Advanced React course, Episode 2" I found out that React won't trigger re-render if children React Elements are the same by reference and the only way to implement this is to use React Elements as props. React will compare them and will find out that they are the same and won't trigger re-render.
My question is: If we will create React Component outside of the current Component it will save reference for the Component Function, but the returning Element will be always different and React Reconciliation will fail first shallow comparing, right? So whats the difference if we will declare React Component inside or outside of the current Component because anyway the returning React Element will have always different reference? Is it all about saving reference for the React Component Function?
Thank you!
> Is it all about saving reference for the React Component Function?
This is exactly right :) If the Element changes (as will happen in both cases), but the "type" property is the same (as will happen with the reference to it, if it's declared outside) - then the component, that is represented by that Element, will just re-render.
If the "type" changes as well - as will happen if the component is declared inside, then the component will re-mount. I.e. it will be destroyed and re-created from scratch.
@@developerwaypatterns Thank you ;)
Hey, how do you create the animations?
I use Keynote on Mac
Could you also explain another fancy word on React called "referential equality" ? Is it related to reconciliation ?
No, it's how javascript compares functions, objects and arrays (non-primitive values). It's happening not by their actual value, but by the reference to a value. So two identical arrays/functions/objects, when compared, will return false:
```
const a = [1,2];
const b = [1,2];
a === b; // will be false
```
Only if those variables are pointing to the same object, the comparison will be true:
```
const a = [1,2];
const b = a;
a === b; // will be true
```
developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
@@developerwaypatterns Hmm, so the non-primitive values are passed by reference instead of a new copy of them. It finally clicks now :D I can't thank you enough 💚
Thanks for Great explanation , but want ask about create component inside another we can use
useCallback to create component it works fun ?!!
ex
const CustomInput = useCallback(() => {
console.log("rendering custom input");
return ;
}, []);
Like this, without any dependencies - yep, but what for? :)
And as soon as dependencies appear there, the component will be re-created and as a result - the same problem with re-mounting
Thats it, friendship broken with React.
Hmm if the inputs are stateful, say by a useState hook for each this behavior does not happen, good but why?
Can you share the code? Is state controlled by the inputs or by the parent?
@@developerwaypatterns the state is controlled by the parent, same code just add 2 hooks for each input.
If the state is controlled by the parent, then those input don't hold their own state. And for bug to be visible, inputs should have something that they control independent of the parent
components cannot be created inside components... unless it's a memo))))
Wow just yesterday I try to understand fiber tree data structure by asking chatgpt and today I found this video that explain it clearly better than chatgpt, thank you for creating this video 🫡