Virtual DOM: Technque behind React's quick DOM updates.

Hello everyone, I’m excited to kick off a new series of posts where I’ll try to explain various concepts from the programming world. We’ll cover everything from terms like idempotent and idiomatic to more specific concepts related to libraries and frameworks. And today, we’ll dive into one such topic — Virtual DOM.

If you find this helpful, don’t forget to Like, Share, and Comment about which topics you’d like me to cover next. Let’s not waste any more time and jump straight into the Virtual DOM!

NOTE: Before we continue, it's important to understand that the concept of a Virtual DOM is not exclusive to React. Other JavaScript frontend libraries, like Vue, also use it to enhance rendering performance.

DOM

The DOM (Document Object Model) is a tree-like representation of an HTML document (or webpage/web application) using nodes or objects. The DOM was designed so that frontend libraries and frameworks (javascript) can interact with and manipulate the document programmatically via its API.

Why Virtual DOM

While the DOM provides an efficient way to manipulate a document through its API, performance can become an issue when there are thousands of elements on the screen. This is because updates in the DOM often involve destroying and recreating entire subtrees.

This is where the Virtual DOM comes into play. The Virtual DOM is a lightweight, in-memory representation of the Real DOM, allowing for fast and efficient synchronization of changes to the actual DOM — a process known as Reconciliation.

The key things to remember here are:

1. The Virtual DOM is a lightweight version of the Real DOM, meaning it doesn't have all the properties of the Real DOM, which makes it more efficient to work with.
2. The Virtual DOM exists in memory, allowing for faster and more efficient manipulation before the changes are applied to the Real DOM.

With this in mind, JavaScript libraries that use the DOM API create their own Virtual DOM and manipulate it. They update the Real DOM only when necessary, and even then, with minimal operations.

How is virtual DOM handled in React??

React JS is a popular library developed by Facebook for building user interfaces. Due to its simplicity it has gain massive popularity and used in many modern web projects.

Like many other JS frontend libraries, React uses the concept of a Virtual DOM to efficiently manage re-renders and updates in an application.

React uses a diffing algorithm alongside a reconciliation technique to optimize this process. (Specifically, the ReactDOM library handles this behind the scenes.)

Lets break it down step by step:

1. React component's render() function

   • The render() function of react component first create the React Element/Virtual DOM with the JSX.
   • It contains lightweight version of Real DOM counterpart and extra properties such as $$typeof, props, to facilitate efficient diffing.

2. Diffing algorithm

   • Whenever a React component is updated, a new Virtual DOM is created, and the diffing process begins. This is an O(n) heuristic algorithm based on two key assumptions.
     1. Different types of elements produces different trees.
     2. A key prop can be used to track which child elements remain consistent between renders.

2.1. Steps in diffing algorithm

• When the algorithm encounters two different types of DOM element: it will tear down the old Virtual DOM and create a new one from scratch based on the new element's specifications.
• When React encounters same types of DOM element: it preserves the old DOM object and only updates the changed attributes.
• For React elements of the same type, React keeps the old DOM object intact and supplies updated props.
• When handling child elements, React iterates through both sets of children (old virtual DOM tree and newly created tree), making updates where differences exist.

2.2. Why use keys?

As mentioned in the last point, the diffing algorithm iterates through child lists and makes changes where necessary. If you don’t use keys in a list of children, performance might suffer, and you could encounter unexpected behavior.

Let's see example:

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>apple</li>
  <li>pineapple</li>
  <li>grape</li>
</ul>

In the above scenario the algorithm can actually efficiently handle the modification. It looks at each index child and finds <li>apple</li> && <li>pineapple</li> is same in both list and does nothing to them while <li>grape</li> is only present in new list hence adds one to the old list.

But say, we want to add the <li>grape</li> at the beginning.

<ul> // old list
  <li>apple</li>
  <li>pineapple</li>
</ul>

<ul> // new list
  <li>grape</li>
  <li>apple</li>
  <li>pineapple</li>
</ul>

Here the performance of the algorithm will decrease as it sees <li>grape</li> inplace of <li>apple</li>, <li>apple</li> inplace of <li>pineapple</li> and a new <li>pineapple</li> in the last position. Thus recreating all the elements from strach.

To solve this performance bottleneck, React team employees the use of Key which is an unique id attached to the list child items that can be used by the algorithm to determine if the item can be left intact and just reorder the position or needs to be recreated.

<ul> // old list
  <li key="a.fruit45">apple</li>
  <li key="p.fruit90">pineapple</li>
</ul>

<ul> // new list
  <li key="g.fruit20">grape</li>
  <li key="a.fruit45">apple</li>
  <li key="p.fruit90">pineapple</li>
</ul>

Now react can use the Key attributes and only reposition the non updated child items while adding the new child item.

3) ReactDOM's render() function

Finally the ReactDOM's render() function is called, which reconciles the differences between the new Virtual DOM and the Real DOM. This results in minimal operations needed to re-render the HTML efficiently.

Conclusion

In this article, we’ve explored the Virtual DOM, a technique used by many frontend libraries to handle data and element changes efficiently with minimal DOM operations. We also looked at how React specifically uses a diffing and reconciliation process to optimize updates.

I hope this post helped you better understand how the Virtual DOM works. Even if you were familiar with the concept, I hope Now you know what is Virtual DOM and how it contributes in creating optimized frontend environment.