How React Virtual Dom Works

What is Document Object Model?

Let’s first understand what is DOM. Document Object Model is also known as DOM. It is a structured HTML representation in a webpage or application. As a tree data structure, it represents the web application's whole UI (User Interface).

Whenever the state of the application’s UI changes, the DOM is updated to reflect the change. The DOM is rendered and manipulated with each change for updating the application’s User Interface, which affects performance and slows it down.

As a result, with many UI components and a complex DOM structure, updating will be more expensive because it must be re-rendered with each change.

The DOM is a tree data structure. It consists of a node for each UI element in the web document.

Updating the Content:

Because the browser does not understand HTML tags, we must use JavaScript objects to change the content or styling. Every time we change the content or styling, a new state corresponding to that change is created, resulting in a change in the state (from initial to final) and an update to the DOM (UI).

Problem With DOM:

One frequent problem with the DOM in React is that direct DOM manipulation can be slow and ineffective, leading to problems with performance. To update the user interface, traditional web developers directly manipulate the DOM by changing the element’s properties or attributes. However, in large applications with many components and frequent updates, this approach can be problematic.

According to the process, the DOM tree must be re-rendered after each state change, and re-rendering a tree with 1000 nodes is not a good way to deal with it because many things can go wrong, such as losing speed or accuracy, and it can even cost us because it may take a lot of space while doing so.

Virtual DOM

According to the documentation of React Virtual DOM, or VDOM, is simply a memory-stored virtual representation of the UI that is synced with Real DOM.

In a nutshell, VDOM is the same as real DOM, except that it is a virtual or lightweight copy of the UI that is stored in memory and is always in contact with the real one.

It has the same properties and processes as the Real DOM, but it cannot directly affect the content, and the Real DOM takes longer to load or render its UI after modification than VDOM.

Working on Virtual DOM

We all know that in virtual DOM, a virtual object similar to the actual object is created with similar properties, and that the DOM re-renders itself after every state change, However, React has something different in store for us.

React runs two virtual DOMs concurrently. One DOM represents the updated version, while the other represents the pre-updated or original version. State transitions occur between them.

A comparison of the two DOMs is performed, and only the component that has changed will be rendered again, while the others remain unchanged. This procedure is known as diffing

Once the diffing is finished and the React has the component or object in which the changes have occurred, only that part of the Real DOM is updated. This is a batch process, not a single-step process in which all changes are sent at the same time to the Real DOM.

Simply put, Real DOM will only be rendered for the parts of the Tree that have changed, with no re-rendering for the rest of the Tree. This will have an impact on the performance and efficiency of our apps and pages.

Example

Let’s have a look at an example to understand it better.

In the above image, Virtual DOM has detected two changes in the third set of nodes, which are highlighted in red, and the same circles are displayed in the Real DOM in the third set, despite the fact that there was no change before that.

Conclusion:

In conclusion, React’s Virtual DOM is a strong abstraction that makes updating the DOM in web applications easier. React can effectively determine the smallest changes needed to update the user interface by making a lightweight copy of the real DOM, leading to a faster and more responsive application.