React: Behind the scenes

Working with Virtual DOM, Reconciliation, Diffing Algorithms

What is Virtual DOM?

What is Reconciliation?

When props/state of a component changes, React’s render() method creates a new Virtual DOM. React decides whether or not to make changes to the actual DOM based on the differences between the previous DOM representation and the newly created Virtual DOM. This process is known as Reconciliation.

Working of Virtual DOM:

2. Difference between the previous DOM representation and new one is calculated.

3. On completion of calculation, the real DOM is updated with only the changes made.

Diffing Algorithms:

Reconciliation in React, i.e. whether or not to update actual DOM based on changes in Virtual DOM, is based on many Diffing Algorithms. State of the art diffing algorithms usually have a time complexity of O(n3).

This means that for 1000 elements, React would have to perform 1 BILLION comparisons in order to determine whether or not to update the actual DOM. Clearly, this would be far too expensive, performance wise. Instead React has certain heuristic algorithms which have a time complexity of O(n) based on 2 assumptions:

Significance of Keys:

This can be further understood with the help of the following example:

<ul>
<li key="996">Item 1</li>
<li key="997">Item 2</li>
</ul>

This is the initial element(unordered list) with 2 child elements(list items), each of those having keys as represented with the key keyword. We add another child element to the beginning of this list, as follows:

<ul>
<li key="995">Item 3</li>
<li key="996">Item 1</li>
<li key="997">Item 2</li>
</ul>

Now, React knows that the element with key 995 is new and the already existing elements with keys 996 and 997 have just moved. So it doesn’t need to construct node tree from scratch, it just places the new child element at the top and moves the already existing child elements at the bottom. Thus, this update becomes a much efficient task.

Note: Keys should be stable, predictable, and unique. Unstable keys (like those produced by Math.random()) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.

For more details on how these algorithms work for various types of DOM elements, visit https://reactjs.org/docs/reconciliation.html

Backend Developer at Tricog Health, Bangalore. https://github.com/Sayan3sarkar