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

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 187

  • @tapasadhikary
    @tapasadhikary  2 ปีที่แล้ว +8

    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
    @farazali5335 2 ปีที่แล้ว +63

    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
      @tapasadhikary  2 ปีที่แล้ว

      Great 👏

    • @mrmadhan8557
      @mrmadhan8557 ปีที่แล้ว +1

      great summary thank you brother

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว

      Most welcome 🔥

    • @miraclenerdkidchiki6249
      @miraclenerdkidchiki6249 ปีที่แล้ว +2

      Nice summary bruv 💯

    • @arankengineer7947
      @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
    @martinkarugaba ปีที่แล้ว +20

    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
      @tapasadhikary  ปีที่แล้ว +1

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

  • @Sanyat100
    @Sanyat100 ปีที่แล้ว +4

    easily the best explanation in the internet about DOM

  • @lindatochukwu3081
    @lindatochukwu3081 11 หลายเดือนก่อน +2

    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
      @tapasadhikary  11 หลายเดือนก่อน

      That’s great to hear, keep going 🚀

  • @ricklove8358
    @ricklove8358 ปีที่แล้ว +2

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

  • @irshadkk9704
    @irshadkk9704 ปีที่แล้ว +4

    very usefull video.thanks for the wonderfull content

  • @shashankbhatgs1150
    @shashankbhatgs1150 ปีที่แล้ว +2

    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
      @tapasadhikary  ปีที่แล้ว +1

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

    • @shashankbhatgs1150
      @shashankbhatgs1150 ปีที่แล้ว

      sure, definitely!

  • @deepakkumarkhatri
    @deepakkumarkhatri ปีที่แล้ว +1

    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.

  • @diamondrock4945
    @diamondrock4945 ปีที่แล้ว +2

    Best of the best videos on DOM

  • @billypentester
    @billypentester ปีที่แล้ว +1

    best ever explanation of virtual DOM

  • @TourManali
    @TourManali 2 หลายเดือนก่อน

    Clear & Deep explanation

  • @jinoshkurisinkal3169
    @jinoshkurisinkal3169 ปีที่แล้ว +1

    Crystal clear explanation of Virtual DOM.

  • @supershinobi7892
    @supershinobi7892 ปีที่แล้ว

    i never had any lecture like this love it

  • @sumitpal8689
    @sumitpal8689 ปีที่แล้ว +1

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

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว

      Great hearing that, Sumit 🤩

  • @techexpertpremiere
    @techexpertpremiere ปีที่แล้ว +1

    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
      @tapasadhikary  ปีที่แล้ว +1

      I am glad that you found it helpful, Omar.

    • @techexpertpremiere
      @techexpertpremiere ปีที่แล้ว +1

      @@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
      @tapasadhikary  ปีที่แล้ว +1

      Very glad to know 🤩

  • @kavithakesavan8938
    @kavithakesavan8938 6 หลายเดือนก่อน

    so far the best explanation for virtual dom

    • @tapasadhikary
      @tapasadhikary  6 หลายเดือนก่อน

      thanks a lot, Kavitha

  • @faizanabbas-i
    @faizanabbas-i 9 หลายเดือนก่อน +1

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

    • @tapasadhikary
      @tapasadhikary  9 หลายเดือนก่อน

      You are most welcome ❤️

  • @miraclenerdkidchiki6249
    @miraclenerdkidchiki6249 ปีที่แล้ว +1

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

  • @mrmadhan8557
    @mrmadhan8557 ปีที่แล้ว +1

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

  • @muxtech9046
    @muxtech9046 9 หลายเดือนก่อน

    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!

    • @tapasadhikary
      @tapasadhikary  9 หลายเดือนก่อน

      Thank you, it means a lot ❤️

  • @MahmoudSamir-l9m
    @MahmoudSamir-l9m หลายเดือนก่อน

    you are very genus, i have watched too many videos , this one is excellent and stands out thank you very much 😍😍😍😍

  • @Victor-wh9bs
    @Victor-wh9bs ปีที่แล้ว +1

    Great explanation.ThankU

  • @amindavids710
    @amindavids710 ปีที่แล้ว +1

    great explanation , clear one

  • @rohanthakur9159
    @rohanthakur9159 ปีที่แล้ว +1

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

  • @sanjayshetty3921
    @sanjayshetty3921 3 หลายเดือนก่อน

    Thanks!

    • @tapasadhikary
      @tapasadhikary  3 หลายเดือนก่อน

      OMG 😱… thanks a lot for this appreciation… 🙏🙏🙏❤️❤️

  • @manikaraheja2491
    @manikaraheja2491 ปีที่แล้ว +1

    Deep concepts explained in very interesting way. Thanks

  • @pratikdevle5830
    @pratikdevle5830 2 ปีที่แล้ว +1

    short and clear explanation, beginner friendly really liked it.

  • @sugrivlodhi2607
    @sugrivlodhi2607 ปีที่แล้ว +1

    I realy love your way of teaching

  • @harshitrajani8369
    @harshitrajani8369 ปีที่แล้ว +1

    Great video
    please keep posting

  • @asthadeepak
    @asthadeepak ปีที่แล้ว +1

    Very useful tanmay
    Thanks for the video

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว

      Thanks Astha 🙏
      It’s Tapas, btw 😅

  • @fithamlakfikrie4657
    @fithamlakfikrie4657 ปีที่แล้ว +1

    Great explanation !

  • @shubham5646
    @shubham5646 11 หลายเดือนก่อน

    what a teaching style and content u have amazing

    • @tapasadhikary
      @tapasadhikary  11 หลายเดือนก่อน

      Thanks Shubham ❤️

  • @aniruddha-adak
    @aniruddha-adak ปีที่แล้ว +1

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

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว

      Thank you! Glad it helped you.

  • @mumbaikapunter007
    @mumbaikapunter007 2 ปีที่แล้ว +1

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

  • @tech_niks
    @tech_niks 3 หลายเดือนก่อน +1

    Thanks Sir for important details.

  • @sublimeelectrons8699
    @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.

  • @KoushikChatterjeephp
    @KoushikChatterjeephp 2 ปีที่แล้ว +1

    Owesome explanation. Better than any paid tutorial.

  • @deepaksingh9928
    @deepaksingh9928 2 ปีที่แล้ว +1

    Superb explained

  • @praptipandey7771
    @praptipandey7771 ปีที่แล้ว +1

    Really good explanation

  • @cyberdaria
    @cyberdaria ปีที่แล้ว +1

    Nice and clear vid, thanks!

  • @grabydeal
    @grabydeal 2 ปีที่แล้ว +1

    wow., amazing explanation

  • @talhaahmad7179
    @talhaahmad7179 2 ปีที่แล้ว +1

    Best video i found on the topic in two days 👍

  • @themelodymusic1658
    @themelodymusic1658 ปีที่แล้ว +1

    Amazing video!

  • @khemendrabhardwaj8805
    @khemendrabhardwaj8805 ปีที่แล้ว +1

    Loved the concept .
    Thanks for amazing explanation

  • @tahreenbanu2812
    @tahreenbanu2812 ปีที่แล้ว +1

    Very nice explanation....

  • @willianandrade1357
    @willianandrade1357 2 ปีที่แล้ว +2

    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
      @tapasadhikary  2 ปีที่แล้ว +1

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

    • @willianandrade1357
      @willianandrade1357 2 ปีที่แล้ว +1

      @@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
      @tapasadhikary  2 ปีที่แล้ว +1

      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!

  • @ajayarya3914
    @ajayarya3914 2 ปีที่แล้ว +1

    Very clean and clear explanation. Awesome 👍

  • @education24carat
    @education24carat ปีที่แล้ว +1

    Great lecture

  • @visheshgupta4990
    @visheshgupta4990 11 หลายเดือนก่อน +1

    Thank you so much it is very well explained good video

  • @vishalkuwar6579
    @vishalkuwar6579 ปีที่แล้ว +1

    Useful video 👍

  • @rishiranjan2822
    @rishiranjan2822 2 ปีที่แล้ว

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

  • @akshaypatil8393
    @akshaypatil8393 ปีที่แล้ว +1

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

  • @sapnasawai5199
    @sapnasawai5199 2 ปีที่แล้ว +1

    It's really very useful

  • @lifeofmrc
    @lifeofmrc ปีที่แล้ว +1

    Amazing video thank you

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว

      Thanks a lot, you are welcome.

  • @andrewaghoghovwia1948
    @andrewaghoghovwia1948 2 ปีที่แล้ว +1

    Thanks alot mate.. fully understood

  • @surajchaudhary1162
    @surajchaudhary1162 2 ปีที่แล้ว +1

    Became ur fan 🥰
    The way u explain 🔥🔥

  • @jatilyadav4000
    @jatilyadav4000 ปีที่แล้ว +1

    Amazing video

  • @sunilgeorge8864
    @sunilgeorge8864 ปีที่แล้ว +1

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

  • @jaycodes8790
    @jaycodes8790 2 ปีที่แล้ว +1

    Amazing video man!

  • @KeshavMeenuAgarwal
    @KeshavMeenuAgarwal 2 ปีที่แล้ว +1

    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
      @tapasadhikary  2 ปีที่แล้ว +1

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

    • @GoWithLyrics
      @GoWithLyrics 2 ปีที่แล้ว

      Codeevaluation is bets for React & redux

  • @sulaimanshabbir
    @sulaimanshabbir ปีที่แล้ว +1

    Thank you ❤

  • @mahimagontalwar1483
    @mahimagontalwar1483 6 หลายเดือนก่อน +1

    Thank you for your help

  • @siddiqajamadar2283
    @siddiqajamadar2283 2 ปีที่แล้ว +1

    Thank you so much for valuable information

  • @sakinamosavi1104
    @sakinamosavi1104 2 ปีที่แล้ว +1

    very helpful thanks

  • @shortme9374
    @shortme9374 ปีที่แล้ว +1

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

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว

      Thanks a lot. It’s motivating

    • @shortme9374
      @shortme9374 ปีที่แล้ว +1

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

    • @tapasadhikary
      @tapasadhikary  ปีที่แล้ว

      Will take care from new videos

  • @TheCodingCollege8462
    @TheCodingCollege8462 6 หลายเดือนก่อน +1

    Thank you boss

  • @naruto5437
    @naruto5437 2 ปีที่แล้ว +1

    excellent

  • @BhagwatTandale-t7r
    @BhagwatTandale-t7r ปีที่แล้ว +1

    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
      @tapasadhikary  ปีที่แล้ว +1

      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 😄

  • @Hrit
    @Hrit ปีที่แล้ว +1

    Thank you so much

  • @anushasurakala5975
    @anushasurakala5975 9 หลายเดือนก่อน +1

    Thank you

  • @nourrahim5556
    @nourrahim5556 ปีที่แล้ว +1

    YOU are greateeeeeeeeee

  • @nawarajluitel9171
    @nawarajluitel9171 2 ปีที่แล้ว +1

    Thank you sir

  • @bishwajeetpandey1570
    @bishwajeetpandey1570 ปีที่แล้ว +1

    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
      @tapasadhikary  ปีที่แล้ว +1

      > 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
      @bishwajeetpandey1570 ปีที่แล้ว +1

      @@tapasadhikary thank u so much

  • @qR7pK9sJ2t
    @qR7pK9sJ2t 11 หลายเดือนก่อน

    MAGICAL !!!!

  • @devT44
    @devT44 2 ปีที่แล้ว +1

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

  • @random2059
    @random2059 ปีที่แล้ว +1

    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
      @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 💛

  • @arankengineer7947
    @arankengineer7947 ปีที่แล้ว

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

  • @abinavmanikantan913
    @abinavmanikantan913 3 หลายเดือนก่อน +1

    beauty!

    • @tapasadhikary
      @tapasadhikary  3 หลายเดือนก่อน

      Thank you ❤️

  • @GoWithLyrics
    @GoWithLyrics 2 ปีที่แล้ว +1

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

    • @tapasadhikary
      @tapasadhikary  2 ปีที่แล้ว

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

    • @GoWithLyrics
      @GoWithLyrics 2 ปีที่แล้ว +1

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

  • @adarshjaiswal7334
    @adarshjaiswal7334 2 ปีที่แล้ว

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

  • @rashedmia7849
    @rashedmia7849 10 หลายเดือนก่อน +1

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

    • @tapasadhikary
      @tapasadhikary  10 หลายเดือนก่อน +1

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

  • @murali-krishnan
    @murali-krishnan 3 หลายเดือนก่อน

    Then what about React Fiber?

  • @chromepos
    @chromepos 2 ปีที่แล้ว +1

    please, do redux tutorial

    • @tapasadhikary
      @tapasadhikary  2 ปีที่แล้ว

      Yeah, will do

    • @tapasadhikary
      @tapasadhikary  2 ปีที่แล้ว +1

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

  • @ashishprasad2949
    @ashishprasad2949 ปีที่แล้ว

    DOM Api is provided by browser, not JS

    • @tapasadhikary
      @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

  • @SalmanShah-w1x
    @SalmanShah-w1x 4 หลายเดือนก่อน

    Your's subscribe button is irritating Sir.

    • @tapasadhikary
      @tapasadhikary  4 หลายเดือนก่อน

      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.

    • @SalmanShah-w1x
      @SalmanShah-w1x 4 หลายเดือนก่อน

      @@tapasadhikary No I have not liked the video yet😅😅.

  • @suvasispatra6389
    @suvasispatra6389 4 หลายเดือนก่อน +1

    great explanation!

  • @prashlovessamosa
    @prashlovessamosa ปีที่แล้ว +1

    Thank you sir

  • @estleexin7584
    @estleexin7584 4 หลายเดือนก่อน +1

    thank you