12 - ReactJS Virtual DOM - What are Virtual DOM, Reconciliation, Diffing, and Batch Update in React?

"What is Virtual DOM in React?" - Have you heard someone asking this question to you? 😉
So, let's provide the answer to that question. We will also learn the concepts of Reconciliation, Diffing algorithms, and Batch Updates to the original DOM. All set? Let's get started. 🐥
Timecodes
0:00 - Introduction
00:38 - Understanding DOM
05:30 - ReactJS Virtual DOM
08:46 - How does Virtual DOM work?
12:53 - What is Reconciliation Process in React?
14:02 - What is Diffing Algorithm?
17:48 - Wrapping Up
Important Links
-----------------------------
- Twitter: / tapasadhikary
- Blog: blog.greenroots.info/
- Showwcase React Community: www.showwcase.com/community/r...
Liked my work? Do you want to support my work?
* www.buymeacoffee.com/greenroots
Thank You 🙏

[@tapasadhikary]

Content of the Video
0:00 - Introduction
00:38 - Understanding DOM
05:30 - ReactJS Virtual DOM
08:46 - How does Virtual DOM work?
12:53 - What is Reconciliation Process in React?
14:02 - What is Diffing Algorithm?
17:48 - Wrapping Up

[@farazali5335]

Virtual DOM and Reconciliation:
React creates a copy of original dom to avoid making direct changes in the original.
When a change occurs in any state, a new copy of virtual dom is created reflecting that change,
Now react will do diffing on the new and earlier virtual dom to specify the changes,
And now it will batchup changes of several virtual doms finally reflect it in the original DOM. This process is called Reconciliation.
Diffing Algorithm
1- If the root or parent element has changed, its child elements are considered to be changes as well
and will be included in the reconciliation.
2- When checking li elements, the diff algorithm checks all elements to match for any changes or removed or new element.
This takes a toll on performance and thats why keys are used when printing list items as such, to make the differentiation
easier and faster.

[@tapasadhikary]

Great 👏

[@mrmadhan8557]

great summary thank you brother

[@tapasadhikary]

Most welcome 🔥

[@miraclenerdkidchiki6249]

Nice summary bruv 💯

[@arankengineer7947]

sir , above in line 5 , => "And now it will batchup changes of several virtual doms finally reflect it in the original DOM " ,does it mean for any event if state get change it create different virtual dom for parent and every child component ? and what if multiple states of the same component get changed for any event will it create that many virtual dom@@tapasadhikary

[@martinkarugaba]

I have been writing React js code for three years but I had never wrapped my head around the concept of the virtual DOM. Your explanation today was exceptionally clear. Thank you very much Tapas. Please continue doing this. I think you're really good at it.

[@tapasadhikary]

Thanks, Martin. I am very glad to add to your knowledge. Keep learning, Man!

[@mumbaikapunter007]

Thanks mate, short and crisp, to the point. Keep up the good work

[@tapasadhikary]

Thanks a lot, 💙

[@rohanthakur9159]

Thanks a lot Tapas for explaining in such a simple manner. I got to learn a lot from your video. Keep up the good work.👏

[@tapasadhikary]

Thanks a lot, Rohan

[@mrmadhan8557]

by far the best explanation i can get on reconciliation. Thanks a lot subbed

[@tapasadhikary]

Welcome Madhan ✌️

[@deepakkumarkhatri]

Thank you, sir, for contributing to this video. You have explained everything smoothly and I've cleared all my doubts. Keep doing great work for the community.

[@tapasadhikary]

Super 👌

[@shashankbhatgs1150]

Wow, just the right video i was looking for.
Came here to understand just reconciliation, but understood so many concepts like virtual dom, diffing and especially why we use the key attribute. Thanks for making this amazing video!

[@tapasadhikary]

Yay, so glad to hear that. Feel free to check other videos too from the React series 👏🚀💛

[@shashankbhatgs1150]

sure, definitely!

[@ricklove8358]

man this is what i exactly needed. God bless you. Showing love from Tanzania

[@tapasadhikary]

Wow great 💛

[@pratikdevle5830]

short and clear explanation, beginner friendly really liked it.

[@tapasadhikary]

Ah, very glad.

[@lindatochukwu3081]

I'm on the 12th video, I never understood some concepts, but going through your videos, boosted my confidence in some concepts in React JS, thank you so much for breaking it down into understandable pieces

[@tapasadhikary]

That’s great to hear, keep going 🚀

[@sublimeelectrons8699]

thank you sir @tapas! Very well explained. Now I understood why react is undoubtedly fast. I understooD DOM, Virtual DOM ,Diffing(Its like Differential signals in signal mixing) algorithm in just 18minutes. Nobody does it better than you sir. Great job again and again.

[@tapasadhikary]

That's great, keep going 🚀

[@supershinobi7892]

i never had any lecture like this love it

[@tapasadhikary]

Thank you!

[@ajayarya3914]

Very clean and clear explanation. Awesome 👍

[@tapasadhikary]

Thanks a lot, Ajay 💙

[@jinoshkurisinkal3169]

Crystal clear explanation of Virtual DOM.

[@tapasadhikary]

Thank you, Jinosh 💙

[@talhaahmad7179]

Best video i found on the topic in two days 👍

[@tapasadhikary]

Thanks a lot ❤️

[@Sanyat100]

easily the best explanation in the internet about DOM

[@tapasadhikary]

Wow, thanks!

[@khemendrabhardwaj8805]

Loved the concept .
Thanks for amazing explanation

[@tapasadhikary]

I'm glad you liked it 👍

[@kavithakesavan8938]

so far the best explanation for virtual dom

[@tapasadhikary]

thanks a lot, Kavitha

[@faizanabbas-i]

Really Helpful Video to understand these concepts. Thanks for providing such content.

[@tapasadhikary]

You are most welcome ❤️

[@techexpertpremiere]

Thank you for this great explanation of React Virtual DOM. I did not know much about react virtual dom. It seems like to see your video I clear all doubt about the react virtual DOM. Again Thank you.

[@tapasadhikary]

I am glad that you found it helpful, Omar.

[@techexpertpremiere]

@@tapasadhikary Your tutorial was the main factor of clear about react virtual dom or VDOM.
I think every react developer should know about the concept of VDOM. I think this concept will be help me lot in future when I will worked with react project.

[@tapasadhikary]

Very glad to know 🤩

[@rishiranjan2822]

Sir this is absolutely gold explanation....cleared many doubts...tysm!

[@tapasadhikary]

Great, glad to know 👍

[@miraclenerdkidchiki6249]

I love this teaching method....its so in-depth and clearly explained...thanks so much brother👍

[@tapasadhikary]

Thanks a lot.

[@cyberdaria]

Nice and clear vid, thanks!

[@tapasadhikary]

Most welcome 👏

[@TheCodingCollege8462]

Thank you boss

[@Victor-wh9bs]

Great explanation.ThankU

[@tapasadhikary]

Thanks a lot.

[@shubham5646]

what a teaching style and content u have amazing

[@tapasadhikary]

Thanks Shubham ❤️

[@harshitrajani8369]

Great video
please keep posting

[@tapasadhikary]

Sure thing! Wil do.

[@visheshgupta4990]

Thank you so much it is very well explained good video

[@tapasadhikary]

Thank You

[@manikaraheja2491]

Deep concepts explained in very interesting way. Thanks

[@tapasadhikary]

Thanks a lot, Manika ✌️

[@diamondrock4945]

Best of the best videos on DOM

[@tapasadhikary]

I'm so glad 💙

[@sugrivlodhi2607]

I realy love your way of teaching

[@tapasadhikary]

Thank you so much 🙏

[@andrewaghoghovwia1948]

Thanks alot mate.. fully understood

[@tapasadhikary]

Super, glad you liked 💙

[@sumitpal8689]

Very good explanation, any dummies can understand the way you have explained. Awesome, keep doing this good job

[@tapasadhikary]

Great hearing that, Sumit 🤩

[@irshadkk9704]

very usefull video.thanks for the wonderfull content

[@tapasadhikary]

Most welcome 🤗

[@lifeofmrc]

Amazing video thank you

[@tapasadhikary]

Thanks a lot, you are welcome.

[@mahimagontalwar1483]

Thank you for your help

[@tapasadhikary]

I'm glad ❤️

[@skillfulmind960]

Very useful content and the explanation style is awesome .....

[@tapasadhikary]

Thank you! Glad it helped you.

[@themelodymusic1658]

Amazing video!

[@tapasadhikary]

Thanks a lot 💛

[@jaycodes8790]

Amazing video man!

[@tapasadhikary]

Thank you

[@sulaimanshabbir]

Thank you ❤

[@tapasadhikary]

Most welcome ✌️

[@deepaksingh9928]

Superb explained

[@tapasadhikary]

Thank you

[@siddiqajamadar2283]

Thank you so much for valuable information

[@tapasadhikary]

You are most welcome 💙

[@KoushikChatterjeephp]

Owesome explanation. Better than any paid tutorial.

[@tapasadhikary]

Means a lot 💙

[@amindavids710]

great explanation , clear one

[@tapasadhikary]

Thank you 🙏

[@Hrit]

Thank you so much

[@tapasadhikary]

Most welcome

[@asthadeepak]

Very useful tanmay
Thanks for the video

[@tapasadhikary]

Thanks Astha 🙏
It’s Tapas, btw 😅

[@qR7pK9sJ2t]

MAGICAL !!!!

[@KeshavAggarwaltechy]

Hi Tapas,
Found your tutorial after searching for react js, I myself is Python Django developer, I too teach stuff related to python. I wanted to enhance myself on more modular stuff in frontend part. Your videos are great help
Great stuff
Also Camera and background enhancement is awesome, :)
Thank you

[@tapasadhikary]

Thanks, Keshav 💙. Sharing knowledge is a divine thing. Great to know you contribute to the Python community 👍.

[@GoWithLyrics]

Codeevaluation is bets for React & redux

[@grabydeal]

wow., amazing explanation

[@tapasadhikary]

Thanks a lot 👍

[@billypentester]

best ever explanation of virtual DOM

[@tapasadhikary]

Wow, made my day 💛

[@willianandrade1357]

Very good video Tapas! But to be honest, these concepts are hard to swallow... specially the diffing algorithms. I'll rewatch your video and read the docs to fully grasp the idea. Thank you for your work.

[@tapasadhikary]

Thanks, William. Please feel free to ask ur doubts in the comments section, I'll try responding as well 😊

[@willianandrade1357]

@@tapasadhikary The first question I have is about the diffing algorithms you talked about. You taught me how they work but didn't name them. So, if I understood correctly there's: a diffing algorithm specially for changes on root elements and their content, another one specially for changes in attributes (this one I didn't quite understand) and another one for listing content and list elements. And all of them only work in JSX, since all of this is because of the DOM and Virtual DOM shenanigans. Is this right?

[@tapasadhikary]

Yes all respect to JSX as that is what constructs Virtual DOM and renders.
The second one is if the root doesn't change, it compares for the attribute change. That's where diffing happens again!

[@prashlovessamosa]

Thank you sir

[@tapasadhikary]

Welcome

[@education24carat]

Great lecture

[@tapasadhikary]

Thank you!

[@surajchaudhary1162]

Became ur fan 🥰
The way u explain 🔥🔥

[@tapasadhikary]

Wow, thanks a lot 💙

[@jatilyadav4000]

Amazing video

[@tapasadhikary]

Thank you, Jatil 🙏

[@fithamlakfikrie4657]

Great explanation !

[@tapasadhikary]

Thanks a lot 👍

[@praptipandey7771]

Really good explanation

[@tapasadhikary]

Glad you liked it.

[@vishalkuwar6579]

Useful video 👍

[@tapasadhikary]

Thanks for watching ❤️

[@tahreenbanu2812]

Very nice explanation....

[@tapasadhikary]

Thanks a lot, I’m glad 💛

[@anushasurakala5975]

Thank you

[@tapasadhikary]

Most welcome.

[@sakinamosavi1104]

very helpful thanks

[@tapasadhikary]

You are most welcome 💙

[@akshaypatil8393]

Yes sir it is vary useful knowledge you provide. sir please make video about Routing.

[@tapasadhikary]

Sure

[@sunilgeorge8864]

Good explanation brother. Keep rocking. Also put a video on React Fibre and Stack

[@tapasadhikary]

Thanks brother 🙏

[@sapnasawai5199]

It's really very useful

[@tapasadhikary]

Thanks a lot

[@estleexin7584]

thank you

[@tapasadhikary]

You are welcome

[@shortme9374]

Liked, Subscribed. Thank you sir for making such clear and informative video.

[@tapasadhikary]

Thanks a lot. It’s motivating

[@shortme9374]

@@tapasadhikary if possible then remove that rolling subscribe button which comes below the video. it diverts the attention.

[@tapasadhikary]

Will take care from new videos

[@nourrahim5556]

YOU are greateeeeeeeeee

[@tapasadhikary]

Thank you 🙏

[@user-gi9bn3hf4k]

This video is providing much clarity abut the DOM working, but since you displaying like ,subscribe, and the bell icon at the bottom of page is distracting to user.
I suggest you to that it can be showed only once at the time of video starting.
NOTE: Good videos automatically gets subscribed.

[@tapasadhikary]

In fact, I have removed it altogether in my recent videos... Thanks for going through and as you liked it, I believe you have subscribed too 😄

[@naruto5437]

excellent

[@tapasadhikary]

Thanks a lot 👍

[@devT44]

Sir, what is heuristic algorithm? Where does it fits in the entire process? Is it same as diff algorithm?

[@adarshjaiswal7334]

What do you mean by saying in-memory object and how is it different from the real DOM obj?

[@arankengineer7947]

sir, why do not we use ordered list instead of ul , it can tell specific order of change and no need for key

[@rashedmia7849]

I am waiting for Javascript advance course with dsa.❤❤❤

[@tapasadhikary]

That's a good ask... I will start on it after my ongoing course.

[@random2059]

Please reply 🙏🙏🙏
So react show us illumination of actual Dom just to save computational power and under the hood it slowly update the actual Dom time to time by algorithms set
????
so getElement by Id , getElement by class goes away 😂

[@tapasadhikary]

It's conceptually the same but handled in memory instead of tweaking the actual DOM. Think it like, you have data store and you have replicated some portion of it in memory and perform actions on it than doing it on the DB directly.
DOM methods like getElementbyxxx stays but as React is declarative(please watch the secret sauce video of React series) so it abstracts way interacting with those low level APIs directly.
Thanks for watching 💛

[@GoWithLyrics]

when you asked for special attention in video, you also started poping subscribe and like popup's...great clap for you

[@tapasadhikary]

That must be a pleasing coincidence 😀. I hope you liked the content, though.

[@GoWithLyrics]

@@tapasadhikary yes content is very good…i understood about VD

[@bishwajeetpandey1570]

I have a doubt at 10:15 You said if parent component states changes then react will mark all it's child components changes .
Now suppose if parent component have a use state and that use state is only used by a one child component and there are others child elements but they don't use this useState they are simply static components.
And latter on when the parent use state changes due to some event will it's all child component who is not using the useState will also be marked as changes to new virtual dom and will be re-rendered on the screen.
If yes then where is the performance optimization in this scenario ?

[@tapasadhikary]

> Now suppose if parent component have a use state and that use state is only used by a one child component and there are others child elements but they don't use this useState they are simply static components.
Here are a few terminologies we need to understand. Child never gets Parent's state. A component's state is private to itself. One way the state value gets passed to child is using the props(which is not same as the state). So if A passed the props to B and B doesn't pass to C, the prop change from A to B will impact only B except the case the B itself changes in such a way the it has be teared down and built again.
On top of this we can bring optimization for cases where the props is a heavily computed value or something that doesn't change often. Those cases we can think using the memo. However, it shouldn't be used often without considering if we really need it.

[@bishwajeetpandey1570]

@@tapasadhikary thank u so much

[@chromepos]

please, do redux tutorial

[@tapasadhikary]

Yeah, will do

[@tapasadhikary]

It;s available now. Please check and let me know.

[@ashishprasad2949]

DOM Api is provided by browser, not JS

[@tapasadhikary]

Yes these APIs are not core part of the language, however available as wrapper JS Web APIs developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

[@nawarajluitel9171]

Thank you sir

[@tapasadhikary]

Welcome 💙