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