The Magic of React's Reconciliation: Behind the Scenes with a Microsoft Frontend Developer

Рет қаралды 13,879

Жыл бұрын

In this video, we look into the famous reconciliation algorithm that separates React from the rest of the frameworks.
Here are the references used for the video:
legacy.reactjs.org/docs/faq-i...
legacy.reactjs.org/docs/recon...
If you liked this video, check out my whole React playlist here:
• React concepts illustr...
If you like hand-drawn illustrations and 2-3 frontend dev resources every week for free, then sign up for the FREE CodeSketched newsletter:
codesketched.substack.com/
Codesketched site:
www.codesketched.com/
More info about me:
www.kapeelkokane.com/
Background music used in this video 👇🏾
--------------------------------------------------------------
♪ Onion (Prod. by Lukrembo)
Link : • (no copyright music) l...
--------------------------------------------------------------

Пікірлер: 39

@sayurikamble825 4 ай бұрын

Best! Would love to see more & more videos from you.

@Ari-uw1io 8 күн бұрын

Great Explanation !

@chrisschuller7055 7 ай бұрын

Very good video! Especially the last part about keys was eye-opening! 🎉 Keep it up!

@CodeSketched 6 ай бұрын

Thanks. Glad you liked it 👍

@srsrajesh8385 6 ай бұрын

Thank you for this amazing content 😃

@nightmare-9467 3 ай бұрын

I love your ability to explain simply, you sincerely helped me a lot, sir. Thank you!!

@CodeSketched 3 ай бұрын

Thanks a lot for the kind works. Glad it helped you.

@GVenkataKousik 9 ай бұрын

Excellent brother you nailed it!

@saifullahkhan3776 9 ай бұрын

What an explanation !!!!!!......Huge respect...............You literally did the post-mortem.......Thank you...subscribed❣

@CodeSketched 9 ай бұрын

Thanks a lot. Glad you liked it. Please share with others.

@basharath Жыл бұрын

Great explanation, Kapeel 👏

@CodeSketched Жыл бұрын

Thanks :)

@hersheynaik3029 10 ай бұрын

Beautiful explanation. Subscribed!!

@CodeSketched 10 ай бұрын

Thanks. Please share with others who might find it interesting :)

@Isagi__000 11 күн бұрын

That's a hella good explination man.

@CodeSketched 11 күн бұрын

Thanks :)

@himanshujain6292 Жыл бұрын

Good explanation

@balabuyew 3 ай бұрын

The most interesting case, where keyed and not keyed children are mixed (and may be even moved around), is not described.

@raghuraghav6636 6 ай бұрын

Now, I got to know why we need to pass keys. Thank you brother and keep coming up with these type of content.

@CodeSketched 6 ай бұрын

Thanks a lot. Please share with other too :)

@sohailsheikh7171 4 ай бұрын

why?

@raghuraghav6636 4 ай бұрын

@@sohailsheikh7171 because lists are rendered in different way compared to other elements.

@sohailsheikh7171 4 ай бұрын

@@raghuraghav6636 oh thanks

@abdulrahmantahir3033 3 ай бұрын

const [count, setCount] = React.useState(0); this line is runned every time when Counter function is called ? every time new variable is created count, setCount and gets the current state and that callback respectively ?

@chennasreenu4723 5 ай бұрын

Love You BOSS....

@varchasavkumar4358 11 ай бұрын

greattttttttttttttttt explanation

@CodeSketched 11 ай бұрын

Thanks a lot. Glad you liked it. Do share with others and help the channel :)

@viratpatil 4 ай бұрын

I have quick question on this so when we say comparison do we really compare with real dom with virtual dom or we compare previous state of real dom..?

@CodeSketched 4 ай бұрын

Until the DOM updates, there is no previous state. Just one state that the DOM exists in. And that is what the virtual DOM is compared with.

@viratpatil 4 ай бұрын

@@CodeSketched So are you saying we always compare virtual dom to real dom ?

@abdulrahmantahir3033 3 ай бұрын

isnot the update VDOM compared with the previous VDOM ?

@sreelakshmij189 7 ай бұрын

one doubt, you told virtual dom will b stored in memory and will b compared with actual dom.here where do actual dom is stored is it the browser's space where we inspect and check the dom tree?

@CodeSketched 7 ай бұрын

Hey, good question. The React framework has access to the virtual DOM that is stored in memory and also has access to the actual DOM via the APIs provided by the browser.

@abdulrahmantahir3033 3 ай бұрын

all things are stored in computer's memory.........