What is Virtual DOM and how does it work?

Virtual DOM is an abstraction of the real DOM, representing a lightweight copy of the user interface structure in memory. Instead of directly modifying the real DOM, changes are first applied to the Virtual DOM, and then a comparison (diffing) is made with the previous version of the Virtual DOM.

Minimal changes necessary to update the real DOM are then calculated, and only those are applied. This improves performance because operations on the real DOM are costly and slow.

The process roughly looks like this:

1. Changes in the application state trigger an update to the Virtual DOM.
2. The new and old versions of the Virtual DOM are compared.
3. A list of changes is generated based on the differences.
4. These changes are applied to the real DOM.

This is how, for example, React works.