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

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

[@sayurikamble825]

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

[@srsrajesh8385]

Thank you for this amazing content 😃

[@GVenkataKousik]

Excellent brother you nailed it!

[@chrisschuller7055]

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

[@CodeSketched]

Thanks. Glad you liked it 👍

[@nightmare-9467]

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

[@CodeSketched]

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

[@saifullahkhan3776]

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

[@CodeSketched]

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

[@Ari-uw1io]

Great Explanation !

[@hersheynaik3029]

Beautiful explanation. Subscribed!!

[@CodeSketched]

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

[@basharath]

Great explanation, Kapeel 👏

[@CodeSketched]

Thanks :)

[@himanshujain6292]

Good explanation

[@Isagi__000]

That's a hella good explination man.

[@CodeSketched]

Thanks :)

[@raghuraghav6636]

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

[@CodeSketched]

Thanks a lot. Please share with other too :)

[@sohailsheikh7171]

why?

[@raghuraghav6636]

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

[@sohailsheikh7171]

@@raghuraghav6636 oh thanks

[@chennasreenu4723]

Love You BOSS....

[@varchasavkumar4358]

greattttttttttttttttt explanation

[@CodeSketched]

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

[@artahir123]

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 ?

[@balabuyew]

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

[@AbhishekBhandari-om9hu]

great

[@viratpatil]

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]

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]

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

[@artahir123]

isnot the update VDOM compared with the previous VDOM ?

[@sreelakshmij189]

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]

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.

[@artahir123]

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

[@sourabhsemalty9016]

Fiber....

[@CodeSketched]

The answer to all the questions in the universe 😁

[@ADayWithDev]

it will be more good if you explain this in hindi