The best example to understand virtual DOM

#webdev #javascript #react #vue

The virtual DOM is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM.

So generally libraries and frameworks which provide virtual DOM functionality implement virtual tree of UI nodes and on change or re-rendering process, it will check the new node tree with the older node tree that is virtual DOM and then call browser DOM API to re-render only the part that has been changed.

Let's understand this by actual example.

The above example is simply re-rendering the content in the div element with root Id. So if we see in the developer tools of the browser, we see something like this

So, the whole root content is getting re-rendered every time.
Now let's use react to do the same

It's time to check the element rendering in the developer tools of the browser and see what we get...

Guessing you have seen the virtual DOM magic in the above example. Frameworks and libraries like Vue and React use virtual DOM for this purpose.

Virtual DOM provides us optimized update process and the freedom to not think much about the rendering process (Even if we are re-rendering the whole UI it will actually re-renders the change) but as there is always price to pay and here the price is in the form of high-memory consumption of storing the copy of dom and checking the difference every time something re-renders.

Top comments (10)

amt8u • Sep 16 '20

I can't say if its the best example, but you did manage to showcase the Optimized update process which is difficult to visualize specially in these small examples.

Maulik • Sep 16 '20

Thanks for the feedback. You are correct, this may not be the best example. I have delivered a few sessions where I have given this same example and people loved it so I have posted it here thinking it will be easy for others to understand through this example.