Before getting into VDOM, we will first briefly explain what DOM is in the context of Web Development.

In JavaScript, the Document Object Model (DOM) is a programming interface that represents an HTML or XML document in memory. It allows you to manipulate the contents of the document, add or remove elements, and change the styles of elements on the page.

The DOM is not part of the JavaScript language itself, but it is commonly used in conjunction with JavaScript to create dynamic interactive web pages. When a web page is loaded, the browser creates a DOM tree by parsing the HTML and building a representation of the page in memory. The DOM tree consists of a hierarchy of nodes, with each node representing an element on the page (such as a div, p, or button element).

Once the DOM tree has been created, you can use JavaScript to access and manipulate the nodes in the tree. For example, you can use the document.getElementById() method to access a specific element by its ID, or the document.querySelector() method to access an element using a CSS selector. You can then use methods like element.innerHTML or element.style to change the contents or styles of that element.

The DOM is an important part of the web platform, and it is supported by all modern web browsers. It is a key part of how JavaScript is able to interact with the contents of a web page, and it enables you to create rich, dynamic, and interactive experiences on the web.

Virtual DOM (VDOM)

The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This approach enables the declarative API (Application Programming Interface) of React, where a developer specifies what the UI should look like, and the React library takes care of ensuring that the actual DOM accurately reflects this ideal representation.

The virtual DOM is a lightweight JavaScript object that represents the actual DOM. When a component's state or properties change, the virtual DOM is updated instead of the actual DOM. This allows React to determine the minimum set of changes that need to be made to the actual DOM, which helps to improve the performance of the app.

Example

For example, imagine that a user clicks on a button in a React app. This action would trigger a change in the component's state, which would cause the virtual DOM to be updated. React would then compare the updated virtual DOM to the previous version, and determine the minimum set of changes that need to be made to the actual DOM in order to reflect the new state. This might involve adding, removing, or updating some DOM elements, but it would be much faster than updating the entire DOM.

The virtual DOM is an important part of the React library, and it helps to make React apps fast and efficient. It allows React to update the UI quickly and efficiently and helps to ensure that the app stays responsive and smooth, even when handling complex updates.