REACT virtual DOM | What is it?

Introduction

React is an amazing platform for creating web and mobile applications, it serves as a layer to interact with native web features like the DOM and helps abstract some processes with the use of reusable components, which provide a simpler way of managing UI and dividing them into smaller bits and pieces all while providing tools to manage state and rerendering of the DOM whenever a state is changes via a triggered event, this event could be whenever data is loaded from a server (endpoint) and needs to be represented on the DOM or simply a value being changes after some arbitrary operation. From a performance standpoint, the hardest thing to do is to update the DOM, also knowing that Javascript is single-threaded which provides us with an unwanted problem to solve.

A naive approach to solving this problem

A simple theoretical way of solving this problem would be to simply store information about the DOM in memory and keep track of the changes only applying those changes in batches (to increase performance). That’s basically the virtual DOM!!!.

What is the DOM

The DOM or Document Object Model is a standardized API that represents the HTML or XML document, it represents components and component structures which enables developers to easily change properties of HTML components and add styles to them. The document represents the page as Nodes this way PAGES can be easily manipulated by Javascript. Making changes can be slow henceforth the use of the Virtual DOM

What’s the Virtual DOM?

The virtual DOM can be easily defined as a lightweight representation of the DOM, it exists in memory as a tree of data representing the nodes of the actual DOM.

For every node in the DOM, there is an object representing it in the virtual DOM, it represents the element but does not interact with the real DOM directly, like mentioned above DOM manipulation is slow, but changing values of data in memory is much faster

Advantages

• Makes rendering more efficient
• Speeds up rerendering by batching changes
• Changes are applied on the Virtual Dom first before it is applied on the actual DOM.
• It’s like editing the plan for a building instead of the entire building all the time.,

How does it work?

The React DOM Render function when called collects info from the JSX and uses that to create the virtual DOM. At every point in time, there are two different trees, one a previous snapshot and the current state, whenever a change occurs React is able to compare these two trees the process is called Diffing, an algorithm used to compare changes is called a Diffing algorithm, what makes the process so much faster is that React is able to figure out the fastest way to make this changes based on the nature of the change.

Note React does not directly interact with the actual DOM, it interacts with the virtual DOM.

Taking a look by example

Let's look at 2 different DOMs

First DOM

 
<div>
<div className=’dom1’>
	<p className=’1’>Hi am king</p>
</div>

<div className=’dom2’>
	<p className=2>Hi am king</p>
</div>


</div>

```##### Second DOM

``` Here React compares the two trees and notices the only difference in them is the content of the second component, it then changes the content of the second component and updates the DOM, this happens so fast that it's not noticed and is more efficient than changing the entire UI.

Example 2

In the last example, we changed the content of a div now let's look at us adding a new element to the div.

First DOM

<div>
<div className=’dom1’>
	<p className=’1’>Hi am king</p>
</div>

<div className=’dom2’>
	<p className=2>Hi am king</p>
</div>


</div>

Second DOM

<div>
<div className=’dom1’>
	<p className=’1’>Hi am king</p>
</div>

<div className=’dom2’>
	<p className=2>Hi am not king</p>
<p className=3>Hi am not king</p>

</div>


</div>

Here we notice that in the second div component we add a

tag, react sees these changes, and appends a p tag at the bottom of the div component.

The interesting thing happens in the next two examples

First DOM

<div>
<div className=’dom1’>
	<p className=’1’>Hi am king</p>
</div>

<div className=’dom2’>
	<p className=2>Hi am king</p>
</div>


</div>

Second DOM

<div>
<div className=’dom1’>
	<p className=’1’>Hi am king</p>
</div>

<div className=’dom2’>
<p className=3>Hi am not king</p>
	<p className=2>Hi am not king</p>

</div>


</div>

Here we add the p element to the top of the second component, this causes React to rerender the entire component.

<div className=’dom2’>
<p className=3>Hi am not king</p>
	<p className=2>Hi am not king</p>

</div>

In the scenario of us having 10000 child elements means that react would be forced to rerender all those components again and by the off chance that those components have other underlining processes that are time or resource-intensive, we would have to rebuild all those processes, react handles this with a simple method of using KEYS. React lets developers add a key property to its list component as a unique identifier, this could be an index or simply a data ID gotten from the backend.

First DOM

<div>
<div className=’dom1’>
	<p className=’1’>Hi am king</p>
</div>

<div className=’dom2’>
	<p className=2>Hi am king</p>
</div>


</div>

Second DOM

<div>
<div className=’dom1’>
 
	<p key= 2fd >Hi am not king</p>
<p key=fdf >Hi am not king</p>
	<p key=2fd > Hi am not king</p>
<p key=3vd > Hi am not king</p>
	<p key=2sc > Hi am not king</p>
<p key=3xx > Hi am not king</p>
	<p key=2gg > Hi am not king</p>
<p key=3bb> Hi am not king</p>	
<p  key=2ww > Hi am not king</p>


</div>

<div className=’dom2’>
<p key= fdg >Hi am not king</p>
	<p key= 2fd >Hi am not king</p>
<p key=fdf >Hi am not king</p>
	<p key=2fd > Hi am not king</p>
<p key=3vd > Hi am not king</p>
	<p key=2sc > Hi am not king</p>
<p key=3xx > Hi am not king</p>
	<p key=2gg > Hi am not king</p>
<p key=3bb> Hi am not king</p>
	<p  key=2ww > Hi am not king</p>
</div>


</div>

Here we can see that the first element in the div with key fdg is added to the top of the component dom2 the diffing algorithm is able to identify all the other elements with the same key and is able to skip recomputing them and focus on the new div to be rendered.

Conclusion

Managing UI Updates on the browser is slow, and react optimizes that for us with the virtual DOM, the concept of the virtual DOM was started by React but has seen adaptation in other frontend frameworks, the process is simply finding optimized ways to manipulate the actual DOM, to get more on it check out the official React DOCs.