Reconciliation in react is a process in which it provides a declarative API that keeps you away from the worry of what is changing on every update. When a component’s state changes, React has to verify whether they want to update the DOM or not?
In this process, it creates a Virtual DOM and comparing it with the current DOM. In this context, the Virtual DOM will contain the new state of the DOM.
Diffing Algorithm and it types
When the state of a component changes, Initially react compares the root elements of both the tree so that an element needs to be changed from one type to another, And react unmounts the whole tree and replace it with the new one.
During an unmounting of a tree, the nodes of an old tree will get destroy and the component instance will receive the componentWillUnmount() lifecycle method and if any state is associated with the old one will get lost.
During the process of building a new tree the new DOM replaces the old one and similarly, the component instance will receive another lifecycle method named componentWillMount() and then finally componentDidMount() will be triggered. In this case, any node you find below the root of a DOM tree will get destroyed.
Type 1: When we have Elements Of Different Types
For eg: Suppose if we display the text initially in <h1> and after a click on a button it displays the text using <p> tag.
Original DOM
<h1> Understanding Reconciliation in react </h1>NEW DOM
In this case the OLD DOM is get destroyed and replace it with the new one.
<p> Understanding Reconciliation in react </p>
So the above case occurs in diffing when elements are of different type. Similarly if we have an elements which are of same type.
Type 2: When we have DOM Elements Of The Same Type
For eg: Suppose we have two elements which are of the same types and only classes used in those elements are different just like shown below:
Original DOM
<h1 classname=”old”> Understanding Reconciliation in react </h1>NEW DOM
In this case the react modify only the classname on the underlying DOM node and similar thing applied for style property.
<h1 classname=”new”> Understanding Reconciliation in react </h1>
Type 3: When it recursing over the children
When it recursing over the children then by default it traverses over the children of the list and made the necessary changes wherever the difference appears.
For eg: Adding elements at the bottom of the list i.e adding another child in a new tree.
Original DOM
<ul>
<li>Item 1</li>
<li> Item 2 </li>
</ul>NEW DOM
In this case react will match both the list and will make changes at the end of children i.e insert the new child in the list shown in new DOM.
<ul>
<li>Item 1</li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>
Type 4: Keys
Keys are another mechanism provided by react which we use in a situation where we insert the children at the top of the list. Suppose if we consider an example shown in Type 3 above, if we add <li> Item 3</li> at the top of the children it will give us the worst performance as it will traverse/mutate every child.
So to overcome this scenario, react supports an attribute called Keys which plays a vital role in resolving this issue. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree.
For eg: If we add this key attribute, even if we add item 3 at the top of children given in the list of Original DOM will make it feasible and efficient.
Original DOM
<ul>
<li key”one”>Item 1</li>
<li key=”two”> Item 2 </li>
</ul>NEW DOM
In this case react knows that the list element with key=”three” is the new element inserted and other were same which obviously increase the performance.
<ul>
<li key=”three”> Item 3 </li>
<li key”one”>Item 1</li>
<li key=”two”> Item 2 </li>
</ul>
So after reading this blog, you will be able to understand that how reconciliation plays an important role in making the UI fast and how to increase the performance of an application as it doesn’t completely update you DOM. It will change only wherever these updation occurs.
Thanks for reading!!!
