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. The virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties.
Whenever a change is made, the virtual DOM will update instead of the real DOM. This allows for faster updates and better performance. When the virtual DOM has been updated, a diff algorithm will identify what has changed in the virtual DOM. Then, the real DOM will be updated with only the things that have changed.
For example, if you have a button in your application that changes the background color of a page when clicked, the virtual DOM will first determine what has changed. In this case, it will recognize that the background color has changed. Next, the diff algorithm will identify the difference between the virtual DOM and the real DOM and update the real DOM with the new background color.