React reconciliation: how it works and why should we care

[@leonardodeslf]

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]

Thank you! 😊

[@Alastairtheduke1]

I agree, you have an amazing gift for teaching!

[@Antoshkiv1]

​@@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 ?

[@СергейМаркелов-м7м]

What a crazy fact with same key and conditional rendering with null! Bravo 👏 Thank you for explaining these things

[@mikitaishchanka4688]

Yeah! Your rock! There are tonnes of content for novices on KZbin 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!

[@sebabratakundu]

I learned a lot from your posts and videos. Keep sharing your knowladge with us.

[@ibrahimmohamed856]

Thanks for the information it clears a lot of confusing concepts in react that may make juniors struggle ❤

[@developerwaypatterns]

Glad it was useful! 😊

[@Yoband706]

And non-juniors to be honest. Loved this video.

[@ostadomid3355]

Haven't seen such easy explained detailed video ever. Really helpful. Hope to have more like this.

[@Arzen84]

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!

[@developerwaypatterns]

Thank you, glad those are useful! 😊

[@marcellciszekdruzynski]

Your videos and blog posts are just amazing keep up with the awesome job!

[@marketkombat]

Thanks, your videos are always a pleasure to watch because I love under the hood stuffs and your delivery is very engaging.

[@ahsaninkiad4781]

This is simply the best explanation

[@gyros9162]

Thank you so much, Nadezhda! The article is brilliant

[@ezeobisunny]

I love your explanation, very clear and concise ❤

[@MS-el8wj]

One of the best explanation for reconciliation. I loved it. Thanks for your time

[@ngrnv]

Amazing! That is the content I was looking for!

[@LinhNguyen-bp9hd]

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?

[@LinhNguyen-bp9hd]

would appreciate if you can recommend any good book on react kind of a deep dive like what you are doing

[@developerwaypatterns]

I'm about to release a book about exactly that in a few days, subscribe here: advanced-react.com/ :) The voice is real :)

[@SouravRakshit_srv]

I couldn't understand this topic from react docs thank you so much

[@ayushkumar2436]

super helpful finaly have a better understanding of react reconcilliation

[@lovikuanyshev]

Really love your videos, thanks for the great work!

[@cypherstone3005]

You're amazing dude. Awesome explanation.

[@warwolt]

Incredible explanation

[@RiadAlsaqal]

gold content. thank you.

[@katsunoi]

amazing video! you have a great teaching style

[@aissanadjemeddine1330]

Thank you so much for this videos 💓💓💓

[@moisesarias4563]

Muchas gracias por el contenido, que forma tan sencilla de explicar conceptos más avanzados

[@itsmepawan]

I am newbie to React so didnt't understand it completely as this seems advanced but I still got one aha moment. Subbed! 🙌

[@pritamchakroborty9924]

Really very helpful video. lots of knowledge thanks for sharing with us ❤

[@sharifurrobin7720]

Amazing explanation ❤

[@shrekpar]

Большое спасибо за видео, очень интересно и познавательно. У вас хорошо получается доносить материал. И еще раз большое спасибо)

[@developerwaypatterns]

Glad you like it 😊

[@hossamkamal2459]

That was clear and concise, thank you. Please, could you create those types of videos covering JavaScript object-oriented programming design patterns as well?

[@HoangHahalehoang]

great job Nadia!

[@silvioc9519]

i love so much your work. Thanks :D

[@mohdsaquib380]

Your tutorials and articles are amazing and of deep knowledge. Can you please share how and what tools you use to create KZbin videos? Really your explanations are too the point and simple.

[@developerwaypatterns]

Thank you! :) I use Final Cut Pro and sometimes Keynote

[@mohamedbelal6820]

amazing! Thank you so so much!

[@victorpilyasinsky8736]

Надя, спасибо, познавательно!

[@story_of_us_]

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!

[@developerwaypatterns]

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

[@sniperline047]

soo good!

[@innerstateofflow7777]

this is god-tier

[@MauricioCorzo-g7v]

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?

[@developerwaypatterns]

Thank you! I'll add this to my todo list, great idea :)

[@arjungaikwad9602]

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?

[@developerwaypatterns]

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.

[@this-user-is-not-loser]

Cool! Thanks!

[@lovikuanyshev]

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!

[@developerwaypatterns]

> 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.

[@lovikuanyshev]

@@developerwaypatterns Thank you ;)

[@berkaycirak]

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

[@JoeBuza]

Quality content

[@marouaniAymen]

Thanks a lot for the video, as always instructing content. Just a question, what tool did you use to animate and display code examples ?

[@developerwaypatterns]

Thank you! For animation - it's just Keynote :)

[@markedby]

Thank you!

[@sachinmalik5837]

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

[@developerwaypatterns]

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

[@sachinmalik5837]

@@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

[@shanemarchan658]

Hey, how do you create the animations?

[@developerwaypatterns]

I use Keynote on Mac

[@roym4457]

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?

[@developerwaypatterns]

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.

[@roym4457]

@@developerwaypatterns gotcha thank you :)

[@sasdasaasdasdasdadad5354]

Thanks !

[@fiatluxinregnonoctis]

Thank you

[@jordantseng8330]

god tier!

[@sushantrajbanshi4508]

Could you also explain another fancy word on React called "referential equality" ? Is it related to reconciliation ?

[@developerwaypatterns]

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

[@sushantrajbanshi4508]

@@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 💚

[@TheTrippyTerminal]

Thats it, friendship broken with React.

[@arbnorlumezi8639]

Hmm if the inputs are stateful, say by a useState hook for each this behavior does not happen, good but why?

[@developerwaypatterns]

Can you share the code? Is state controlled by the inputs or by the parent?

[@arbnorlumezi8639]

@@developerwaypatterns the state is controlled by the parent, same code just add 2 hooks for each input.

[@developerwaypatterns]

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

[@4BeerLife]

thx!

[@GurovDmitriy]

components cannot be created inside components... unless it's a memo))))

[@berbudy]

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 🫡