Virtual Dom in React JS

Kaushal Rao

August 4, 2023
2 min read

Overview -Virtual Dom in React JS

Developers use React to create modular user interfaces and encourage the development of reusable UI components that can display dynamic data.

The concept of virtual DOM simply represents the DOM virtually. Whenever our application’s state changes, the virtual DOM updates, rather than the real DOM.

The virtual DOM takes the form of objects and is a considerably lighter replica of the actual DOM.

To grasp the concept of the virtual DOM, one should possess a basic understanding of the DOM (Document Object Model).

What is DOM ?

‘DOM‘ stands for ‘Document Object Model.‘ In simple terms, the DOM represents your application’s user interface (UI). Whenever the state of your application’s UI changes, the DOM updates to reflect that change.
In JavaScript, we people ‘getElementById()‘ or ‘getElementByClass()‘ method to make modifications to the DOM.
Whenever a change occurs in your application’s state, the DOM is updated to reflect the UI changes.
Performing frequent DOM manipulations is expensive and can have a significant impact on performance.

Virtual DOM ?

Virtual Dom is light weight copy of actual DOM.
The concept of Virtual DOM comes to make the performance of Real DOM better and faster. Virtual DOM is a virtual symbol of the DOM.
Everytime the state of our application changes, the virtual DOM gets updated instead of the real DOM.
virtual DOM is much faster and efficient.
React uses virtual DOM to enhance its performance.

How React works by using Virtual DOM ?

Whenever we make changes in a React component, we update the Virtual DOM with those changes instead of directly updating the Actual DOM.
Once the changes have been applied to the Virtual DOM, it compares the new Virtual DOM with the previous one and identifies the specific changes that need to be applied to the actual DOM.
This approach significantly improves performance compared to manipulating the real DOM directly. It’s one of the reasons React stands out as a high-performance JavaScript library.