React Virtual DOM

 

What's a DOM?

DOM stands for “Document Object Model”. The DOM represents the UI of your application. If there is a change in the state of application UI, the DOM gets updated to represent that change. But the problem is frequently updating the DOM affects performance, making it slow.

What's a Virtual DOM?

The DOM is represented as a tree data structure of the actual elements that are being created for your page. Virtual Dom is  an in-memory representation of the real Dom. If a state is changed, by comparing these two trees we can identify the actual state that has been changed. Then we can surgically update that single element, no need to manipulate the whole thing. This process is called “diffing”.

How it works?

The image below shows the virtual DOM tree and the diffing process.

source: https://www.oreilly.com/library/view/learning-react-native/9781491929049/ch02.html

The red circles represent the nodes that have changed. These nodes represent the UI elements that have had their state changed. The difference between the previous version of the virtual DOM tree and the current virtual DOM tree is then calculated. The whole parent subtree then gets re-rendered to give the updated UI. This updated tree is then batch updated to the real DOM.

Summary

So, in summary, the Virtual DOM implements:

A tree structure representing the DOM elements your application creates.
A diff algorithm designed to identify changes between DOM representations.
A way to replicate said changes in the actual DOM - but only if necessary.

References

https://www.pluralsight.com/guides/virtual-dom-explained

https://programmingwithmosh.com/react/react-virtual-dom-explained/