Hubert
6 min
October 3, 2024

React JS Virtual DOM - what's it all about?

With the evolution of modern web applications, managing dynamic user interfaces has become a challenge. React JS, one of the most popular libraries for building user interfaces, introduced the concept of a virtual DOM, which helps optimize performance and reduce browser load. The virtual DOM acts as an intermediary between React components and the actual DOM, allowing applications to run faster and more efficiently, as explained further in the article.

Read more
React JS Virtual DOM - what's it all about?

What is the virtual DOM in React?

The virtual DOM is a simplified, lightweight representation of the actual DOM (Document Object Model). In React JS, instead of directly manipulating the actual DOM, React creates a virtual copy that acts as a “middle layer.” When changes occur in the user interface, the virtual DOM is updated first. Only after comparing the old and new versions of the virtual DOM does React apply the minimal and necessary changes to the actual DOM, significantly improving the performance of web applications.

How does the virtual DOM work?

The process of the virtual DOM operates in several steps:

1. Creating the virtual DOM: when a React application is launched, the entire user interface is represented in the form of the virtual DOM. Components are rendered into this virtual structure.

2. Component state changes: when the state or properties (props) of a component change, React re-renders the relevant components in the virtual DOM but does not immediately update the actual DOM.

3. Diffing algorithm: React compares the new version of the virtual DOM with the previous version to identify the key differences.

4. Reconciliation: based on the identified differences, React decides which parts of the actual DOM need to be updated.

5. Updating the actual DOM: only the changed elements are updated in the actual DOM, significantly improving performance.

Example of virtual DOM in action

Consider a simple example (in JavaScript) where a React component contains a counter:

javascript
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increase Counter</button>
    </div>
  );
}

export default Counter;

Each time the user clicks the button, only the counter (`<h1>Counter: {count}</h1>`) changes. React updates only the modified element in the actual DOM, leaving the rest of the page untouched.

Advantages of the virtual DOM

1. Faster updates: with the virtual DOM, only the elements that have actually changed are updated. This means React avoids the need to reload the entire page, greatly speeding up the performance of a web application.

2. Performance optimization: in traditional websites, changes to the DOM are costly because every change requires updating the entire DOM tree. The virtual DOM eliminates the need for direct manipulation of the actual DOM, reducing operational costs in the browser.

3. Better user experience: users have a smoother experience as changes to the interface happen quickly and without delay, which is especially important for dynamic user interfaces.

Use of virtual DOM compared to traditional websites

The virtual DOM is characterized by its speed. Traditional websites without React’s virtual DOM are more prone to delays and performance issues. When an update occurs, the entire user interface often changes, even if only one element has been modified. In React applications, the virtual DOM eliminates this problem by updating only the parts of the page that have changed. This makes web applications more responsive.

Optimization using the virtual DOM

React offers additional optimization tools, such as `React.memo()` and techniques like lazy loading, which further reduce unnecessary component renders. This is especially useful in applications with complex, dynamic user interfaces that require frequent updates.

React Virtual DOM and SEO

While the virtual DOM significantly improves application performance, it also poses challenges, especially in the context of SEO. Dynamic applications can be difficult for Google bots to index because the content of the page may be rendered asynchronously. To prevent this, it’s recommended to use Server-Side Rendering (SSR), which allows content to be generated on the server side, making it easier for search engines to index.

Disadvantages of the virtual DOM

Although the virtual DOM offers many benefits, it also has some limitations:

  • Complexity in large applications: in the case of large applications with extensive component trees, the diffing algorithm may become more complex and potentially less efficient.
  • Complex rendering: in some cases of complex dynamic data rendering, the virtual DOM may require additional optimization, such as asynchronous component loading.

How does the virtual DOM differ from the actual DOM?

In traditional websites, every change in the interface directly modifies the actual DOM, which can slow down the application. The virtual DOM works in memory and synchronizes changes with the actual DOM only where necessary. The differences between them are key to understanding why the virtual DOM operates faster.

### Comparison of the virtual and actual DOM:

Virtual DOMActual DOM
Created in memory Direct manipulation of page elements
Updates only modified partsMay require rebuilding the entire page
Faster rendering process Slower performance with frequent changes

How does the virtual DOM improve performance in React?

The virtual DOM minimizes the number of operations performed on the actual DOM, which are among the most expensive actions in the browser. As a result, applications run faster, and the client-side experience is seamless (even in complex single-page applications (SPA)). Combined with techniques like lazy loading and asynchronous resource loading, the virtual DOM greatly enhances application performance.

Difference between virtual DOM and Shadow DOM

Although both terms are related to optimizing user interface performance, the virtual DOM and Shadow DOM are two different technologies. The virtual DOM is an optimization tool that allows React to update the interface quickly. In contrast, the Shadow DOM is a browser technology that isolates the style and structure of components, avoiding style conflicts.

Code summarizing the use of the virtual DOM:

javascript
import React, { useState } from 'react';

function App() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <h1>Virtual DOM in Action</h1>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increase Value</button>
    </div>
  );
}

export default App;

In this example, each change in the numerical value triggers an update to only the modified part of the interface, allowing the application to run quickly and smoothly.

Summary

The virtual DOM is a fundamental concept that has made React one of the most efficient tools for building web applications. By effectively managing changes in the user interface, it allows for the creation of dynamic, responsive applications that run fast and smoothly. However, it is worth noting that in very large projects, additional optimizations may be required to maintain maximum performance. React with the virtual DOM is thus an excellent tool for building modern web applications, offering a balance between performance and flexibility.

The virtual DOM is one of the most important tools that allows for the optimization of React JS applications. Thanks to it, React can manage single-page applications (SPA) and dynamic applications in a way that minimizes operations on the actual DOM, translating into faster performance and better user experience. Understanding how the virtual DOM works is key for any developer who wants to effectively use React to build modern web applications.

Connected articles
React JS Virtual DOM - what's it all about?
5 min
January 27, 2025
CSS Grid and Flexbox - usage, characteristics, differences
When designing and laying out websites, two powerful CSS techniques are often used: CSS Grid...
Learn more
React JS Virtual DOM - what's it all about?
9 min
January 16, 2025
What are cascading style sheets(CSS)?
Cascading Style Sheets, known as CSS (Cascading Style Sheets), is a language used to describe...
Learn more
React JS Virtual DOM - what's it all about?
7 min
January 9, 2025
What are HTML semantic tags and why should you use them?
HTML, or HyperText Markup Language, is the basic language that builds the structure of websites....
Learn more
See all
Discover more topics