React.js: Why and how it works fast?

4 min readMay 7, 2021

React is an open-sourced, front-end, javascript library that builds user interfaces or UI Components. It was created by Jordan Walke, a software engineer at Facebook. This library was first deployed on Facebook’s newsfeed in 2011 and later on Instagram in 2012 and it became open-sourced at JSConf US in May 2013.

According to this Stack Overflow 2020 Developer Survey, which was conducted among 65,000 developers, 35.9% of them selected React in the “Most Popular Technologies” category, making it the 2nd most popular web technology.

Also, in the “Most Loved, Dreaded and Wanted Category”, 68.9% of developers selected it as “Most Loved”, making it the 2nd among other 16 of them, 31.1% selected is as dreaded, making it the 15th, and 22.4% expressed their interest to learn it in future, making it the 1st choice in “Wanted” category.

There are several reasons for its relatively faster-growing popularity than most other frameworks and libraries. One reason is that the Virtual DOM in React makes the UI run significantly fast which delivers a better user experience.

What is DOM?

The Document Object Model, popularly called DOM, is a programming interface for HTML and XML documents. DOM represents the document nodes as objects so that programming languages can connect to the page and change the document structure.

In browsers, a web page is a document, and the DOM is an object-oriented structural representation of that webpage that can be modified with Javascript.

With Virtual DOM, react gives developers more power to manipulate the DOM in a significantly efficient way.

So, What is Virtual DOM?

The Virtual DOM is a programming concept where a virtual representation of the whole UI, including the changes that are about to be made in real DOM, is kept in memory and then synced with the real DOM through libraries like ReactDOM. This process is known as Reconciliation.

What Virtual DOM basically does is, makes two virtual copies of the real DOM-

One includes the changes that developers make in react components that eventually are going to get updated on real DOM,
And, the other is the exact copy of the current state of the real DOM.

While these two copies are being kept virtually, before rendering the components to the real DOM, react compares the two copies of the DOM, then identify the changes made, and finally, only updates the changes while not touching the other parts in the real DOM.

If we were to make changes in the UI by directly manipulating the DOM by adding a new DOM node or making some other changes to it, that would mean demolishing the entire real DOM and building a new one. Through using Virtual DOM, we can make changes to only the edited portion which does not replace the entire DOM but only the changed one. Which makes react web apps run significantly faster.

Reconciliation

As mentioned before, Reconciliation is the whole process of comparing the two virtual DOM, making changes in the necessary places, and finally, rendering the changed portion to the real DOM. The way react does the whole process is known as The Diffing Algorithm.

How Does The Diffing Algorithm Works?

Diffing Algorithm generates different types of behavior based on the comparison results. Starting from the root element, the result will differ based on where the difference is.

Elements of Different Types

If the elements have two different root elements, react will demolish the whole DOM tree, create a new one, and then render it.

DOM Elements of The Same Types

If the DOM Elements are of the same type, react will compare the attributes in it. If there’s a difference, react will update the changed attribute only leaving the other parts intact.

Component Elements of The Same Types

The component instances remain the same upon updating a component. React only changes the props passed to these instances to match the element. Then React renders the components and the diff algorithm recurses on the previous and the new version and only updates the changes.

Recursion and The Need for a Key Attribute

While comparing the children of a DOM node, the diffing algorithm recurses over the lists of children and makes changes wherever needed. So, if the changes are added at the end, it will only change that particular portion.

But entering the changes naively could cause unnecessary changes as React will not be able to differentiate between the changed and unchanged portion.

For example,

<ul>
  <li>first</li>
  <li>second</li>
</ul>// React makes the changes without any issues here.<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

But if the change happens at the beginning or in the middle of the list item, React will also change the other list item starting from the actual changes.

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>// React will make changes to the entire list below.<ul>
  <li>Here to cause unnecessary changes</li>  
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

This is why it is necessary to use a unique key attribute in children nodes so that React can recognize and differentiate the changed and the unchanged parts and act accordingly.

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>// React will make changes at right places.<ul>
  <li key=12 >Here to cause unnecessary changes. But can't</li>  
  <li key=13 >first</li>
  <li key=15 >second</li>
  <li key=17 >third</li>
</ul>

The key attributes must contain a unique value in every children node and the developers need to make sure it will stay that way. It might be tempting to pass the item’s index as the key value. But that can very easily reorder the whole list and can produce unexpected changes.