Virtual DOM is a technique used in web development to improve the performance of web applications.
It creates a lightweight copy of the actual DOM, which is the structure of the HTML elements in a web page.
When the state of the application changes, the virtual DOM updates its copy and then calculates the most efficient way to update the actual DOM.
This minimizes the number of changes that need to be made to the actual DOM.
It acts as an intermediary between the application state and the actual DOM. When the state of the application changes, the virtual DOM updates its representation and then compares it to the previous one.
It then calculates the most efficient way to update the actual DOM, making only the necessary changes to the HTML elements.
Let's take an example,
You are building an eCommerce app and your page design is as follows.