React reconciliation: how it works and why should we care
Vložit
- čas přidán 10. 05. 2023
- 👉 Advanced React Book: www.advanced-react.com
👉 React reconciliation: how it works and why should we care: www.developerway.com/posts/re...
⃗💬 Twitter: / adevnadia
💬 Linkedin: / adevnadia
👩🏼💻 The mystery of conditional rendering: codesandbox.io/s/keen-fog-vru...
👩🏼💻 How to fix it with re-positioning: codesandbox.io/s/re-positioni...
👩🏼💻 Dynamic arrays and keys: codesandbox.io/s/key-attribut...
👩🏼💻 How to fix the mystery with keys: codesandbox.io/s/key-fix-w8p9...
👩🏼💻 How to force re-use of inputs with the same key: codesandbox.io/s/force-re-ren...
Looking in detail into how React reconciliation algorithm works. Explore in the process quirks of conditional rendering, the 'key' attribute, and why we shouldn't declare components inside other components.
The video includes:
* The mystery of conditional rendering
* Exploring how Reconciliation works by walking through the mystery and the solutions
* The "key" attribute, what is its purpose in the algorithm, and how to make use of it outside of dynamic lists
* Declaring components inside other components: why it's a bad practice and how React behaves when it sees code like this
#react #reactjs #webdevelopment #programming #frontend #frontenddeveloper
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 CZcams 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.
Amazing! That is the content I was looking for!
Your videos and blog posts are just amazing keep up with the awesome job!
Really love your videos, thanks for the great work!
Incredible explanation
Thank you so much, Nadezhda! The article is brilliant
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 so much your work. Thanks :D
Thank you so much for this videos 💓💓💓
Amazing explanation ❤
You're amazing dude. Awesome explanation.
amazing video! you have a great teaching style
I love your explanation, very clear and concise ❤
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! 😊
Thanks, your videos are always a pleasure to watch because I love under the hood stuffs and your delivery is very engaging.
One of the best explanation for reconciliation. I loved it. Thanks for your time
gold content.
thank you.
Muchas gracias por el contenido, que forma tan sencilla de explicar conceptos más avanzados
Надя, спасибо, познавательно!
Really very helpful video. lots of knowledge thanks for sharing with us ❤
great job Nadia!
Thank you!
Большое спасибо за видео, очень интересно и познавательно. У вас хорошо получается доносить материал. И еще раз большое спасибо)
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! 🙌
Thanks !
Thank you
I couldn't understand this topic from react docs thank you so much
Quality content
this is god-tier
That was clear and concise, thank you. Please, could you create those types of videos covering JavaScript object-oriented programming design patterns as well?
god tier!
thx!
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
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 :)
Your tutorials and articles are amazing and of deep knowledge.
Can you please share how and what tools you use to create CZcams videos?
Really your explanations are too the point and simple.
Thank you! :)
I use Final Cut Pro and sometimes Keynote
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 :)
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 :)
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 :)
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, 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, 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
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 ;)
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 💚
Hey, how do you create the animations?
I use Keynote on Mac
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 🫡