Understanding Virtual DOM? Concept behind Virtual DOM? React For Beginners [2]

What is virtual DOM?

The virtual DOM is object identical to the javascript object, it is simply the representation of JavaScript DOM object

great

basically virtual Dom is blue print of real DOM and as we change any element or component in react app , React will first make the copy of virtual Dom and then update all the elements of that Virtual Dom and after that react will compare the both Virtual DOM which are basically DOM objects and figure out the difference ( the process of update virtual DOM take very less time then real Dom directly) and after the comparison react will update that element or component in real Dom. these hole process is call reconciliation.

dome

Hats off to you man!!
What an amazing explanation in just 4 mins. 👏👏

Very helpful

Appreciated bro

Great! Thank You

He's just reading off Codecademy's article about the virtual Dom. Disliked

<3 great

im so lucky to meeting this guy on the earth.

tq

Finally a clean and clear explanation for virtual DOM. Thanks!

Manipulating the real DOM is not slow. Actually it is a lot faster than the Virtual DOM.
The issue is not in the DOM manipulation but in the whole process os rendering that follow it till the pixels been rendered by the browser to the final user.

So the big advantage of using Virtual Dom is not because it is faster, but because we are avoiding touch in real dom and trigger this renderer pipeline but only when it is necessary.

how can i create virtual dom in javascript

Great work man now actully I understand how it work .... Its bit easier to understand

Thanks for Virtual DOM explanation. I have a question can we see virtual DOM in browser? React will show virutal DOM or the real DOM everytime it loads?

The perfect explanation

The end music is very good

virchu dum

Great explanation. Thanks.

Thank you very much

great explanation thanks a lot!

Why updating one DOM (Real DOM here) isn't faster , but comparing three DOMs (i. e. real DOM , Prev Virtual DOM and Current Virtual DOM ), then updating two DOMs is Faster ???

I am confused at, why cant the real dom directly be updated partially. Why does it have to go through virtual dom comparison to figure out and tell what to update. Not sure if i am missing something here

Tq so much ...

Anyone has any benchmarks of virtual dome increasing performance?
First of all, some 12-year-old kid will make a basic HTMLJs app where he/she reprints the whole HTML element.
And in my lifetime i have never seen any frontend getting any faster or smoother with react.

I’m sorry but I’m a little confused. The painting of the ui is slow part right? So if the real dom receives changes at say node 4 from the virtual dom, does it not paint node 1, 2, 3 and 4 again? I guess my confusion is when you make a change in regular JavaScript to only node 4, how is that any different if the real dom is painting node 1,2,3 and 4 again. Perhaps I’m not understanding how the painting of the ui is done by the real dom

Awesome presentation sir.. you use powerpoint or some other software for that?

Awesome explanation!

Can you explain more about the speed, if virtual Dom has to do such an amount of steps: change all virtual Dom completely, copy Dom in 2 states, compare 2 state, apply change to real Dom. Is it faster to just update directly to the real Dom?

Mind-Blowing video series, well explanation,
Keep it, dude,
and make to continuing such videos which help the beginners who really need it.

Good explanation!! Thx!

thanks for the video BUT ITS DOM NOT FUCKING DOME

Simple and easy

Amazing explanation!!! Thank you sir!!!

virtual DOM is the blueprint of the original DOM

Nice tutorial, clean and straightforward👍So the virtual DOM will create different copies of the real DOM( the prev and updated one) and figure out what objects have been updated, then update that specific object to real DOM, cause the changes on screen.

The very last explanation clarified everything for me! Thank you so much

thank you. It helps!!