DEV Community

Cover image for What is Virtual DOM? What are the differences between virtual and real DOM?
Md Nayem Hossain
Md Nayem Hossain

Posted on

What is Virtual DOM? What are the differences between virtual and real DOM?

Virtual DOM is a virtual representation of the real DOM. Basically, it’s just a copy of the real DOM.
The main difference between them is- a virtual DOM object has all the same properties as a real DOM, but it can't display a page into the browser directly, just like the real DOM.

Image description

In summary, here’s basically what happens when we try to update the DOM in React:

i. The entire virtual DOM gets updated.
ii. The virtual DOM gets compared to what it looked like before we updated it. React figures out which objects have changed.
iii. The changed objects only get updated on the real DOM.
iv. Changes in the real DOM cause the screen to change.

Latest comments (0)