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 RU-vid 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!
That was clear and concise, thank you. Please, could you create those types of videos covering JavaScript object-oriented programming design patterns as well?
Your tutorials and articles are amazing and of deep knowledge. Can you please share how and what tools you use to create RU-vid videos? Really your explanations are too the point and simple.
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?
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!
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.
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
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.
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?
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 💚
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 🫡
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
