HTML DOM vs Virtual DOM

DOM

Document Object Model (DOM) is an abstraction of structured text. This text is an HTML code for web developers, and the DOM is simply referred to as HTML DOM. HTML elements are transformed into nodes in the DOM.

The HTML DOM is Expensive

Each web page is internally represented as a tree of objects. This type of representation is known as a Document Object Model. Furthermore, it is a language-independent interface through which programming languages (such as JavaScript) can access HTML elements.

In simple words,
The HTML DOM is a standard for obtaining, changing, adding, or deleting HTML elements.

Virtual DOM is a possible solution

So the React team came up with the idea of abstracting the HTML DOM and creating its own Virtual DOM in order to compute the minimum number of operations we need to apply on the HTML DOM to replicate our application's current state.
The Virtual DOM saves time by eliminating the need for unnecessary DOM modifications.

Exactly how?

React's application state is represented as a Virtual DOM at all times. These are the steps that React takes to optimise performance whenever the application state changes.
Create a new Virtual DOM to represent our application's new state.

Contrast the old Virtual DOM (representing the current HTML DOM) with the new Virtual DOM. Determine the smallest number of operations required to transform the old Virtual DOM (which represents the current HTML DOM) into the new Virtual DOM. After those operations are identified, they are mapped into their equivalent HTML DOM operations .Remember, the Virtual DOM is merely an abstraction of the HTML DOM, and the two are isomorphic.

The minimum number of operations discovered and transferred to their equivalent HTML DOM operations are now directly applied to the application's HTML DOM.

Note: Because the Virtual DOM is a JavaScript Object, operations performed on it are inexpensive.

Reference : React JS Notes for Professionals