King Somto
7 Dec 2021
•
4 min read
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 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!!!.
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
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
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.
Let's look at 2 different DOMs
<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
Hi am king
Hi am not king
In the last example, we changed the content of a div now let's look at us adding a new element to the div.
<div>
<div className=’dom1’>
<p className=’1’>Hi am king</p>
</div>
<div className=’dom2’>
<p className=2>Hi am king</p>
</div>
</div>
<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
<div>
<div className=’dom1’>
<p className=’1’>Hi am king</p>
</div>
<div className=’dom2’>
<p className=2>Hi am king</p>
</div>
</div>
<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.
<div>
<div className=’dom1’>
<p className=’1’>Hi am king</p>
</div>
<div className=’dom2’>
<p className=2>Hi am king</p>
</div>
</div>
<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.
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.
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!