Learn More

Try out the world’s first micro-repo!

Learn More

Understanding DOM and Virtual DOM – And how they work with React

Understanding DOM and Virtual DOM – And how they work with React

During my study of frontend development, I’ve found DOM (Document Object Model) and Virtual DOM (Virtual Document Object Model) pretty confusing. If you’re a fellow beginning developer, you might have the same problem; that’s probably why you're reading this article right now.

DOM and Virtual DOM have their roles to play in React. In this article, you’ll learn what DOM and Virtual DOM are, their differences, and how they’re applied in React. Let's begin!

What Is React?

React (also called React.js or ReactJS) was created by Meta in 2013. It’s a free, open-source JavaScript library used to create user interfaces based on UI components and single-page applications.

What is DOM?

DOM or Real DOM is an acronym for Document Object Model. It’s simply the UI of an application. When there is a change in your application, the DOM is updated so that the change can be reflected. In DOM, the structure and content of a website are represented in the form of a tree. With DOM, scripts and webpages can manipulate, modify and identify the components of a website.

The Inefficiency of DOM

DOM is slow, unlike modern-day websites, which are fluid and reflect modifications almost immediately. DOM was intended for earlier websites, which were static because they were rendered by the server. By contrast, modern-day websites carry out rendering in the browser. Therefore, when DOM is directly used for modern websites, it’s slow. This is why Virtual DOM was created.

What Is Virtual DOM?

Virtual DOM was created by Meta. It’s open-source and managed by the React team. Virtual DOM is simply a copy of DOM. It has all the components and features of the DOM, but it cannot display the page of a website in a browser.

When there are a large number of elements in your DOM, it can be taxing to carry out updates using DOM. However, because of the observable pattern in React Virtual DOM, it’s considerably faster.

React Virtual DOM has all of its constituents waiting for a change in their state. Immediately after there's a change, the Virtual DOM is updated, and in turn, it aligns the change with the DOM, which causes the page to change in response.

Why Is Virtual DOM Faster?

When new elements are added to the UI, a tree representing the Virtual DOM is created. On the tree, the elements are represented by colored spots. If any change is carried out on the elements, a new Virtual DOM tree is made. The new tree is then compared to the former Virtual DOM tree to see which method is best to apply changes to the DOM.

Here's a visual representation of the explanation:

As a result, there is less work done on the DOM, which reduces the performance cost of updating the DOM.

The Benefits of Virtual DOM

Better Performance

Virtual DOM speeds up the performance of a website significantly. Due to the observable pattern, React can acknowledge the part of the DOM that should be changed, and it is immediately updated.

Increased Productivity

Virtual DOM makes it easier to build web applications. With the increase in the growth of React, developers are more productive.

Higher Memory Usage

Virtual DOM makes CPU and memory usage more efficient because it adds an additional layer of JavaScript to the browser.

How Does React Work with Virtual DOM?

At this point, we've talked about Virtual DOM and have a good understanding of how it works. However, how does React work with it?

In React, each piece of UI is a component, and each component has a given state or condition. React pays attention to the observable pattern, and also to a change in state. When there is a change in a component, React immediately updates the Virtual DOM tree. After the Virtual DOM tree has been updated, React compares the new virtual DOM tree with the former Virtual DOM tree in a process called 'diffing'.

After the changed Virtual DOM tree has been identified, React updates the objects that have been changed in the Real DOM.

React Rendering Function

Render() is the process whereby UI is updated and rendered. The lifecycle method needed in React is render().

The render() function is the point where the tree containing the React elements is made. When the state of a component is updated, render() will provide a different tree containing the new React elements. By using setState() in the component, the change in the state of the component is immediately identified by React and then re-rendered.

After that, React finds a way to update the UI so that the recent changes can be reflected. At this point, React updates its Virtual DOM, and in turn, the objects that have changed are updated on the Real DOM.

Batch Update

Updates to the Real DOM are sent in batches for repairing and repainting of UI, leading to increased performance. This is better than sending updates on every single change.

Conclusion

Understanding DOM and Virtual DOM is crucial for web developers. Now that you've learned the exact difference between them, I hope it increases your growth and knowledge in web development.

Interested in becoming a Pieces Content Partner?

Learn More

Get our latest blog posts and product updates by signing up for our monthly newsletter! 

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Table of Contents

React

Frontend

WebDev

More from Pieces