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.

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git