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
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.
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
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.
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
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!
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.
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 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.
Love from Pakistan, very helpful , far better than other channel not to mention they record just to sell courses , but your lectures are quite deep full of knowledge , Sir you great!
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 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?
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!
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.
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
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.
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 ?
> 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.
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 😂
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 💛
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
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
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.
Great 👏
great summary thank you brother
Most welcome 🔥
Nice summary bruv 💯
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
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.
Thanks, Martin. I am very glad to add to your knowledge. Keep learning, Man!
easily the best explanation in the internet about DOM
Wow, thanks!
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
That’s great to hear, keep going 🚀
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!
Yay, so glad to hear that. Feel free to check other videos too from the React series 👏🚀💛
sure, definitely!
Clear & Deep explanation
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.
Super 👌
man this is what i exactly needed. God bless you. Showing love from Tanzania
Wow great 💛
Crystal clear explanation of Virtual DOM.
Thank you, Jinosh 💙
very usefull video.thanks for the wonderfull content
Most welcome 🤗
best ever explanation of virtual DOM
Wow, made my day 💛
Best of the best videos on DOM
I'm so glad 💙
by far the best explanation i can get on reconciliation. Thanks a lot subbed
Welcome Madhan ✌️
short and clear explanation, beginner friendly really liked it.
Ah, very glad.
Thanks Sir for important details.
Most welcome
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.
I am glad that you found it helpful, Omar.
@@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.
Very glad to know 🤩
Very good explanation, any dummies can understand the way you have explained. Awesome, keep doing this good job
Great hearing that, Sumit 🤩
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.👏
Thanks a lot, Rohan
Really Helpful Video to understand these concepts. Thanks for providing such content.
You are most welcome ❤️
Love from Pakistan, very helpful , far better than other channel not to mention they record just to sell courses , but your lectures are quite deep full of knowledge , Sir you great!
Thank you, it means a lot ❤️
I love this teaching method....its so in-depth and clearly explained...thanks so much brother👍
Thanks a lot.
Great explanation.ThankU
Thanks a lot.
Thanks mate, short and crisp, to the point. Keep up the good work
Thanks a lot, 💙
Owesome explanation. Better than any paid tutorial.
Means a lot 💙
Great video
please keep posting
Sure thing! Wil do.
so far the best explanation for virtual dom
thanks a lot, Kavitha
i never had any lecture like this love it
Thank you!
Very useful content and the explanation style is awesome .....
Thank you! Glad it helped you.
Deep concepts explained in very interesting way. Thanks
Thanks a lot, Manika ✌️
Very useful tanmay
Thanks for the video
Thanks Astha 🙏
It’s Tapas, btw 😅
Best video i found on the topic in two days 👍
Thanks a lot ❤️
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.
Thanks, William. Please feel free to ask ur doubts in the comments section, I'll try responding as well 😊
@@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?
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!
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.
That's great, keep going 🚀
Thank you so much it is very well explained good video
Thank You
Thank you boss
great explanation!
Thank you
what a teaching style and content u have amazing
Thanks Shubham ❤️
Loved the concept .
Thanks for amazing explanation
I'm glad you liked it 👍
Nice and clear vid, thanks!
Most welcome 👏
Very clean and clear explanation. Awesome 👍
Thanks a lot, Ajay 💙
Really good explanation
Glad you liked it.
Thank you for your help
I'm glad ❤️
Amazing video thank you
Thanks a lot, you are welcome.
Very nice explanation....
Thanks a lot, I’m glad 💛
I realy love your way of teaching
Thank you so much 🙏
Thanks alot mate.. fully understood
Super, glad you liked 💙
Thank you ❤
Most welcome ✌️
Good explanation brother. Keep rocking. Also put a video on React Fibre and Stack
Thanks brother 🙏
Thank you so much
Most welcome
Great lecture
Thank you!
great explanation , clear one
Thank you 🙏
Amazing video!
Thanks a lot 💛
Thank you sir
Welcome
Thank you so much for valuable information
You are most welcome 💙
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
Thanks, Keshav 💙. Sharing knowledge is a divine thing. Great to know you contribute to the Python community 👍.
Codeevaluation is bets for React & redux
Thank you
Most welcome.
Superb explained
Thank you
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.
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 😄
Yes sir it is vary useful knowledge you provide. sir please make video about Routing.
Sure
Sir this is absolutely gold explanation....cleared many doubts...tysm!
Great, glad to know 👍
Amazing video
Thank you, Jatil 🙏
wow., amazing explanation
Thanks a lot 👍
Useful video 👍
Thanks for watching ❤️
Became ur fan 🥰
The way u explain 🔥🔥
Wow, thanks a lot 💙
Sir, what is heuristic algorithm? Where does it fits in the entire process? Is it same as diff algorithm?
Liked, Subscribed. Thank you sir for making such clear and informative video.
Thanks a lot. It’s motivating
@@tapasadhikary if possible then remove that rolling subscribe button which comes below the video. it diverts the attention.
Will take care from new videos
very helpful thanks
You are most welcome 💙
YOU are greateeeeeeeeee
Thank you 🙏
It's really very useful
Thanks a lot
Amazing video man!
Thank you
MAGICAL !!!!
Thanks!
OMG 😱… thanks a lot for this appreciation… 🙏🙏🙏❤️❤️
excellent
Thanks a lot 👍
when you asked for special attention in video, you also started poping subscribe and like popup's...great clap for you
That must be a pleasing coincidence 😀. I hope you liked the content, though.
@@tapasadhikary yes content is very good…i understood about VD
I am waiting for Javascript advance course with dsa.❤❤❤
That's a good ask... I will start on it after my ongoing course.
beauty!
Thank you ❤️
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 ?
> 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.
@@tapasadhikary thank u so much
sir, why do not we use ordered list instead of ul , it can tell specific order of change and no need for key
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 😂
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 💛
What do you mean by saying in-memory object and how is it different from the real DOM obj?
Then what about React Fiber?
DOM Api is provided by browser, not JS
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
please, do redux tutorial
Yeah, will do
It;s available now. Please check and let me know.
Your's subscribe button is irritating Sir.
I know.. That's why I do not use that guy anymore... that's how we learn 🙂. I hope you liked the video content though.
@@tapasadhikary No I have not liked the video yet😅😅.
thank you
You are welcome
Great explanation !
Thanks a lot 👍
Thank you sir
Welcome 💙