React Virtual DOM Explained

If you are using React or learning React, you must have heard of the term Virtual DOM. In this tutorial we are going to discuss on React Virtual DOM.

ReactJS does not update the real DOM directly but it updates the Virtual DOM. DOM stands for Document Object Model. As per w3.org DOM defines the logical structure of documents and the way a document is accessed and manipulated.

This causes a great performance benefit for ReactJS. Here, we will try to understand why updating the real DOM is slow and how updating Virtual DOM increase the performance?

Highlights :-

Frequent DOM manipulations are expensive and performance heavy.
Virtual DOM is a virtual representation of the real DOM.
When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”.
The virtual DOM then sends a batch update to the real DOM to update the UI.
React uses virtual DOM to enhance its performance.
It uses the observable to detect state and prop changes.
React uses an efficient diff algorithm to compare the versions of virtual DOM.
It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.

React Virtual DOM Explained