Short: The React Virtual DOM

Hello everyone, today, in this short article, let’s talk about an essential concept of React, the Virtual DOM.

The DOM or Document Object Model, is a programming interface for HTML. Thanks to it, and the use of JavaScript (most of the time), we can have access to specific elements of the HTML page, manipulate it, and make the webpages more dynamic.

We can modify, and create elements from the document. The DOM is usually represented as a tree structure of nodes, with each node being an HTML element.

Below is a hierarchical tree representation of the DOM, starting with the root element being HTML, and the other nodes following:

But, since we have a DOM, why would we need a virtual DOM, and what are the differences between the standard DOM and the virtual version?

Well the main problem with the traditional DOM, is that it’s really time-consuming, uses a lot of memory, and updates slowly. Having more and more dynamic web apps, it becomes really difficult to modify the DOM and the updates are getting longer.

Here comes React, and the introduction of the Virtual DOM.

The virtual DOM is a virtual representation of the browser DOM that will be kept in memory. Whenever a change is made to an element on the web app, React is going to check if the component‘s HTML in the virtual DOM is the same. If not, the browser DOM will be updated, on the other hand, if it’s the same, the DOM will not be modified. This is typically what we call the process of reconciliation, which we can divide into 4 parts :

• the virtual DOM is updated whenever an element is modified
• this virtual DOM is compared to the previous version of the virtual DOM
• all the changed elements are updated to the browser DOM
• the web pages are updated according to the browser's DOM

Thanks to the reconciliation, and the way React works behind the scenes, the DOM is only updated when it needs to, and not with any modifications. Websites are faster as a consequence.

But, it’s important to keep in mind, even if websites are faster with React, if many elements need to be updated, it will result in a slow website. So, how can we improve that and keep the benefit of React - which is mainly speed?

The developers behind React have found a great way to deal with this problem, and have created the React Fiber Architecture. The principles of the Fiber Architecture are easy, updates come one after the other, only when needed, and depending on their priority.

For example, if a user is looking at a specific part of a web page, and clicks on a button that displays text on different parts of the page as its result, the updates will be made for the text directly seen by the user, and then will happen for the text that isn’t currently visible. Updates are made over time, step by step, and the web app is optimized.

Thank you for your time, I hope you’ve enjoyed this short article, it was made as a refresher, without going into too much detail.

See you in the next article!