Understand Reconciliation in React the Easy Way !

reconciliation in react


In this tutorial, we are going to learn the concept of Reconciliation in React. After going through this tutorial you will also get to know, how the Diffing Algorithm works in React.

Let us first understand the DOM before jumping into the Reconciliation in React.



What is DOM?

DOM stands for Document Object Model. When a web page is loaded in a browser, the browser creates the Document Object Model of the page. DOM is basically a collection of Objects which is organized as a tree-like structure.

The DOM is created by parsing the code we write, it is done before the rendering of the page. All the documents on the page are represented as nodes and objects that provide an interface so that the manipulation of the DOM can happen. You can consider DOM as a tree-like structure.

The Problem with DOM Manipulation is that traversing a DOM is an expensive task, any updation in the DOM can slow our web application. When there are a lot of changes, happening the browser has to reapply all styles and render new HTML elements. This also happens in the condition when nothing changes.

To overcome this and make DOM manipulation fast, Reconciliation in React was introduced.


Reconciliation

As DOM Manipulation is an expensive task, for improving the performance React introduced the concept of Reconciliation. In React, Reconciliation is the process with the help of which DOM is updated.

Let us see how this occurs.

Whenever the State of React Component changes, DOM is needed to be updated. For doing this, firstly React checks whether it is necessary to update the DOM.

This is done by creating a Virtual DOM and then comparing it with the current DOM (Diffing Algorithm React). A Virtual DOM contains the new state of the component. 

When a new virtual DOM tree is created, the tree is compared or “diffed” with the previous virtual DOM tree. Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM. Hence, reducing the performance cost of updating the real DOM. The great benefit here is that as a developer, you would not need to know how the attribute manipulation, event handling or the manual DOM updates happen behind the scenes. React uses heuristics to reduce the time of processing and to solve the problem in a linear time O(n).

Use of Keys in Reconciliation

Keys are used so that the developer can hint which child elements may be stable across different renders. Keys are used to track changes in components.

Let us understand this with the help of an example.


// A Components contains the following code
<ul>
   <li>Book 1</li>
   <li>Book 2</li>
</ul>

//Suppose a list item is needed to be added.
<ul>
   <li>Book 1</li>
   <li>Book 2</li>
   <li>Book 3</li>
</ul>

//In this case, React will not be able to figure out that the two last elements are the same as in the original list, and will update the interface in an inefficient way. This problem can be solved by adding keys to every child element as follow:
<ul>
   <li key=’1'>Book 1</li>
   <li key=’2'>Book 2</li>
</ul>



Summary 

  1. Frequent DOM manipulations are expensive and performance heavy.
  2. Virtual DOM is a virtual representation of the real DOM.
  3. When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”.
  4. The virtual DOM then sends a batch update to the real DOM to update the UI.
  5. React uses virtual DOM to enhance its performance.
  6. It uses observable to detect state and prop changes.
  7. React uses an efficient diff algorithm to compare the versions of virtual DOM.
  8. It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.
  9. React parses the tree using the Breadth-first search (BFS). For a node of the tree, if the element type is changed, for example from ‘section’ to ‘div’. React will destroy all the sub-tree under that element and will reconstruct it from scratch.


Thanks for reading, please feel free to contact.


Post a Comment

0 Comments