What is the Virtual DOM in React?

React is a popular JavaScript library for building user interfaces. One of its key features, the Virtual DOM, has played a significant role in making React efficient and highly performant.

What is the Virtual DOM?

The Virtual DOM is a virtual representation of the actual DOM (Document Object Model) that React uses for rendering user interfaces. It is an abstraction layerAn abstraction layer simplifies complex underlying processes by providing a simplified interface or representation. created by React to efficiently update the UI without directly manipulating the Real DOM.

In a traditional web application, when the state of a component changes, the entire DOM is re-rendered to reflect those changes. This process can be computationally expensive, especially for complex UIs with frequent updates. React's Virtual DOM solves this problem by introducing a lightweight, in-memory representation of the DOM, allowing React to perform minimal updates to the actual DOM when necessary.

Difference between Real and Virtual DOM

Here's a table comparing Real DOM and Virtual DOM:

How does Virtual DOM work?

Let's see the steps of how Virtual DOM works.

Initial rendering

When a React component is first rendered, it creates a corresponding Virtual DOM representation called a "virtual tree." This virtual tree is a JavaScript object that mirrors the structure of the Real DOM, including all the elements, attributes, and their relationships.

State and prop changes

When the state or props of a component change, React performs a process called reconciliation to determine the differences between the previous and new virtual trees. It identifies the specific parts of the virtual tree that need to be updated to reflect the changes.

The image indicates changes in the state of certain components. React uses these changes to determine what parts of the Virtual DOM need to be updated.

React's reconciliation algorithm, also known as the diffing algorithm, compares the old and new virtual trees and efficiently calculates the minimum number of changes required to update the actual DOM. This process is optimized to minimize expensive operations such as creating or destroying DOM nodes.

Now, React compared the old (the one made without any changes) and new Virtual DOM, React identifies the 2 different states and replaces the old states with them.

Updating the Real DOM

Once the minimal set of changes in Virtual DOM is calculated, React applies those changes to the Real DOM. This process is known as patching where only the necessary updates are made to the Real DOM, resulting in better performance compared to re-rendering the entire DOM.

Example

Let's see one simple code example to understand Virtual DOM.

Explanation

In this example, we have a simple Counter component that displays a count value and a button to increment it. Let's understand how the Virtual DOM works now by following the steps given above:

1. Initial rendering: When the Counter component is initially rendered, React creates a Virtual DOM representation based on the JSX code. It creates a virtual tree that mirrors the structure of the actual DOM.

2. State change: When the button is clicked, the increment function is called, updating the count state using React's useState hook. This triggers a re-render of the Counter component.

3. Reconciliation: During the re-rendering process, React performs reconciliation, where it compares the previous Virtual DOM tree with the updated Virtual DOM tree. It determines the differences between the two trees.

4. Diffing and patching: React's diffing algorithm efficiently calculates the minimal set of changes required to update the Real DOM. In our example, it recognizes that only the value inside the <h2> element needs to be updated.

5. Updating the real DOM: React patches the Real DOM by applying the necessary changes identified during the diffing process. In this case, it updates the count value displayed in the browser.

Advantages of the Virtual DOM

1. Performance optimization: By minimizing the number of updates to the Real DOM, React achieves significant performance improvements.

2. Cross-platform support: Since the Virtual DOM is a JavaScript-based abstraction layer, it allows React to support rendering on various platforms, including web browsers, mobile devices, and even server environments.

3. Component reusability: The Virtual DOM allows the creation of reusable components in React. This reusability enables us to build complex UIs by composing smaller, reusable components.

Conclusion

Virtual DOM is a core concept in React that significantly contributes to the library's popularity and performance. By using an in-memory representation of the DOM and efficiently calculating and applying minimal updates, React minimizes the overhead of rendering and ensures a smooth and responsive user experience.