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!
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.
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!
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.
2:20 Incorrect: The DOM API is not provided by JavaScript. The DOM is not JavaScript. It is language neutral. In fact, you could interact with it while writing a Python script. It just so happens that JavaScript became the universally adopted language for interacting with the DOM in the browser.
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!
man this is what i exactly needed. God bless you. Showing love from Tanzania
Wow great 💛
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 🚀
very usefull video.thanks for the wonderfull content
Most welcome 🤗
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!
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 👌
Thanks!
OMG 😱… thanks a lot for this appreciation… 🙏🙏🙏❤️❤️
Best of the best videos on DOM
I'm so glad 💙
best ever explanation of virtual DOM
Wow, made my day 💛
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 🤩
Clear & Deep explanation
by far the best explanation i can get on reconciliation. Thanks a lot subbed
Welcome Madhan ✌️
Crystal clear explanation of Virtual DOM.
Thank you, Jinosh 💙
Really Helpful Video to understand these concepts. Thanks for providing such content.
You are most welcome ❤️
Great explanation.ThankU
Thanks a lot.
I love this teaching method....its so in-depth and clearly explained...thanks so much brother👍
Thanks a lot.
you are very genus, i have watched too many videos , this one is excellent and stands out thank you very much 😍😍😍😍
Thank you ❤️
so far the best explanation for virtual dom
thanks a lot, Kavitha
I realy love your way of teaching
Thank you so much 🙏
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 ❤️
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
great explanation , clear one
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 ✌️
short and clear explanation, beginner friendly really liked it.
Ah, very glad.
what a teaching style and content u have amazing
Thanks Shubham ❤️
Thanks Sir for important details.
Most welcome
i never had any lecture like this love it
Thank you!
Very useful tanmay
Thanks for the video
Thanks Astha 🙏
It’s Tapas, btw 😅
Thanks mate, short and crisp, to the point. Keep up the good work
Thanks a lot, 💙
Nice and clear vid, thanks!
Most welcome 👏
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 🚀
Great explanation !
Thanks a lot 👍
Great video
please keep posting
Sure thing! Wil do.
Superb explained
Thank you
Owesome explanation. Better than any paid tutorial.
Means a lot 💙
Really good explanation
Glad you liked it.
Loved the concept .
Thanks for amazing explanation
I'm glad you liked it 👍
Yes sir it is vary useful knowledge you provide. sir please make video about Routing.
Sure
wow., amazing explanation
Thanks a lot 👍
Best video i found on the topic in two days 👍
Thanks a lot ❤️
Thank you so much it is very well explained good video
Thank You
Good explanation brother. Keep rocking. Also put a video on React Fibre and Stack
Thanks brother 🙏
Very nice explanation....
Thanks a lot, I’m glad 💛
Amazing video!
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!
Great lecture
Thank you!
Amazing video thank you
Thanks a lot, you are welcome.
Thanks alot mate.. fully understood
Super, glad you liked 💙
Very clean and clear explanation. Awesome 👍
Thanks a lot, Ajay 💙
It's really very useful
Thanks a lot
Sir this is absolutely gold explanation....cleared many doubts...tysm!
Great, glad to know 👍
Became ur fan 🥰
The way u explain 🔥🔥
Wow, thanks a lot 💙
Useful video 👍
Thanks for watching ❤️
Amazing video man!
Thank you
Sir, what is heuristic algorithm? Where does it fits in the entire process? Is it same as diff algorithm?
Thank you for your help
I'm glad ❤️
Thank you so much for valuable information
You are most welcome 💙
Thank you ❤
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
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 😄
Amazing video
Thank you, Jatil 🙏
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
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
Thank you
Most welcome.
very helpful thanks
You are most welcome 💙
sir, why do not we use ordered list instead of ul , it can tell specific order of change and no need for key
Thank you so much
Most welcome
Thank you sir
Welcome 💙
2:20 Incorrect: The DOM API is not provided by JavaScript. The DOM is not JavaScript. It is language neutral. In fact, you could interact with it while writing a Python script. It just so happens that JavaScript became the universally adopted language for interacting with the DOM in the browser.
Thank you boss
excellent
Thanks a lot 👍
YOU are greateeeeeeeeee
Thank you 🙏
What do you mean by saying in-memory object and how is it different from the real DOM obj?
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 💛
MAGICAL !!!!
I am waiting for Javascript advance course with dsa.❤❤❤
That's a good ask... I will start on it after my ongoing course.
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
beauty!
Thank you ❤️
Then what about React Fiber?
please, do redux tutorial
Yeah, will do
It;s available now. Please check and let me know.
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
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😅😅.
great explanation!
Thank you
Thank you sir
Welcome
thank you
You are welcome