ReactJS - Reconciliation

Reconciliation is an internal process of React library. As we know, react application will create a virtual DOM and then updates the actual DOM of the application based on the virtual DOM. Whenever react receives an update request, it will first create a virtual DOM and then compare the virtual DOM with previous state using different diffing algorithm and then only if it is absolutely necessary, it will update the DOM.

Even though the diff algorithm and updating the DOM is internal to React core, understanding the some of the internal will help us to tweak our application to take maximum leverage of the React library.

Diffing Algorithm

Let us see some of the diffing algorithm applied by react core in this chapter.

  • Element of same type

  • Whenever a react component changes an element from one type to another type (say from div to more specific p), the whole of the react virtual dom tree will get changed and it triggers the DOM updates.

<!-- Before -->
<div>
   <Content />
</div>
<!-- After -->
<p>
   <Content />
</p>

Here, the entire element will get updated.

  • DOM Attributes of the same type.

  • When the element are of same type, react will check for attributes for differences. If react finds any new changes in attribute and its values, then it will only update the changed attributes.

<!-- Before -->
<div className="someClass">
   <Content />
</div>
<!-- After -->
<div className="someOtherClass">
   <Content />
</div>

Here, only the class attribute of the DOM instance will get updated.

  • DOM Attributes (style) of the same type.

  • When the elements are of same type and react find differences in style properties, then it will update only the properties of the style.

<!-- Before -->
<div style={{fontFamily: 'Arial'}} />
   <p> ... </p>
</div>
<!-- After -->
<div style={{color: 'red', fontFamily: 'Arial'}} />
   <p> ... </p>
</div>

Here, only the color properties of the div element's style will be updated

  • Components elements of same type − Whenever react sees same react component type, then it will call componentWillUpdate event and other update events of the react component for the component to update its state. Then, it will call the render method of the component and the algorithm recurses

  • Collection of child elements of same type − Whenever react sees a collections of children of same type, it will check the element in order for differences. So, if we have a new first child, then the whole collection will get updated.

<!-- Before -->
<ul>
   <li>Peter</li>
   <li>Olivia</li>
</ul>
<!-- After -->
<ul>
   <li>John</li>
   <li>Peter</li>
   <li>Olivia</li>
</ul>

Here, whole elements (children of ul element) will get updated as the first element (li) is an updated one.

To solve the issue, we can introduce a key attribute as shown in the below code snippet. React has a special key attribute for this purpose.

<!-- Before -->
<ul>
   <li key="1">Peter</li>
   <li key="2">Olivia</li>
</ul>
<!-- After -->
<ul>
   <li key="3">John</li>
   <li key="1">Peter</li>
   <li key="2">Olivia</li>
</ul>

Summary

React tries to optimize the diffing algorithm in every release to make sure that the updates are minimum. Minimum updates means better performance of the application. Knowing the internal and coding accordingly by following best practices, we can improve our application performance exponentially.

Advertisements