Virtual DOM in React

Today we gonna learn about the Virtual DOM present in React, which is responsible for its fast performance and declarative nature.

What is DOM?

DOM stands for Document Object Model, which represents the node tree of all the UI elements present on a page. If any element on the UI changes, the DOM updates itself with the new changes.

This process of updating the DOM frequently makes the web page slow, so that's why there was a need for Virtual DOM. As we know DOM represents Tree Structure so the changes and updates are done quickly but the rerendering part takes a long time to complete.

If you know the Critical Rendering Path, the last step of it i.e Paint takes the longest time to complete, that's why browsers are optimized to repaint in minimum time.

Source: https://guillermo.at/browser-critical-render-path

What is Virtual DOM?

Virtual DOM represents a copy of the actual DOM. React maintains a copy of the DOM and renders the UI according to this DOM.

React works on the concept of observable pattern. It listens to all the changes made in the actual DOM and updates the virtual DOM only with that changes. React then renders the UI only with the changes that happened in the virtual DOM. This process is called diffing.

The process of maintaining sync between the actual DOM and the virtual DOM is called reconciliation.

How Virtual DOM is faster?

As soon as any update is done in the actual DOM, the reconciliation algorithm marks the element as dirty, and goes on to process the next update. When all the updates are processed in the DOM, they are passed to the virtual DOM in batches, instead of one by one as we have in the actual DOM. This makes the virtual DOM a lot faster and thus makes React performant.

Keys - A solution of rerenders

The reference of a UI element in the actual DOM and in the Virtual DOM need not be the same. So what happens in this case, the react will rerender everything even though we changed a single line.

Suppose we have this piece of code. The DOM will render it fully as it's the first time.

<div>
  <p>Hello! I am a piece of text.</p>
  <p>Don't underestimate me!</p>
</div>

Now, if we add another paragraph the DOM will render again all the unchanged paragraphs too.

<div>
  <p>Hello! I am a piece of text.</p>
  <p>Don't underestimate me!</p>
  <p>You don't know my powers!</p>
</div>

Now you'll be like why React is not behaving as it's supposed to be.

So here as I said the reference need not be the same, the first two paragraphs in the actual DOM and in the virtual DOM are different for React and it's considering them as new additions to the DOM. This lead to rerendering of the DOM unnecessarily. This problem can be solved with the help of keys.

<div>
  <p key="1">Hello! I am a piece of text.</p>
  <p key="2">Don't underestimate me!</p>
</div>

While rendering lists, generally we give keys to the element and for many developers, it's a headache to decide what will be the key. So to solve this problem I stumbled upon this syntax of React.

<div>
  {React.Children.toArray(texts.map((text) => <p>{text}</p>))}
</div>

That's it for now folks. Thanks for reading this article. Let me know if anything is not clear.

Connect with me on Twitter, Instagram & LinkedIn

Happy Coding!