What is a Virtual DOM?
That is a fancy term and seem really complicated at first glance but don't worry, it's not that complicated š.
In fact, it's just a buzzword to say that we will use a plain javascript representation of the DOM. We will manage DOM nodes using a completely separate tree build with javascript objects only.
Transformation would happen on the virtual DOM tree, and if necessary then applied on the DOM.
Why would we prefer to use another tree than the DOM one? Isn't this more complicated?
It solves the problem that DOM manipulations are really heavy and slow. This way computing simple JS Objects in memory is really much faster that manipulated DOM objects for every transformations.
Taken from React documentation
What is the Virtual DOM?
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 process is called reconciliation.
This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
Since āvirtual DOMā is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term āvirtual DOMā is usually associated with React elements since they are the objects representing the user interface. React, however, also uses internal objects called āfibersā to hold additional information about the component tree. They may also be considered a part of āvirtual DOMā implementation in React.