Welcome again! I hope you are doing well. I am thrilled to see you here. So Today, we will discuss more About Reconciliation in React.
In the first part of our blog, we explored the concept of reconciliation in React and its significance in achieving high-performance user interfaces. Now, let’s dive deeper into some essential best practices that will help you master reconciliation and unlock the full potential of React in your web development projects.
This blog will look at the Diffing Algorithms and their types.
Diffing Algorithms and their Types in React
When a component’s state changes in React, the reconciliation process starts by comparing the root elements of the old and new virtual DOM trees. If React detects that an element needs to change from one type to another, it proceeds to unmount the entire old tree and replace it with the new one.
During the unmounting phase, React destroys the nodes of the old tree, and the component instance receives the
componentWillUnmount() lifecycle method. Any state linked to the old tree will be lost at this stage.
As React constructs the new virtual DOM tree, it replaces the old one, and the component instance receives the
componentWillMount() lifecycle method, followed by
componentDidMount(). During this process, React destroys and re-renders any nodes below the root of the virtual DOM tree.
Type 1: When we have Elements Of Different Types
For eg: Suppose we display the text initially in <h2>, and after a click on a button, it displays the text using <p> tag.
This case occurs in diffing when elements are of different types. In this case, the OLD DOM is get destroyed and replaced with the new one.
Original DOM <h2>Understanding Reconciliation in react </h2> NEW DOM <p> Understanding Reconciliation in react </p>
Similarly, if we have elements that are of the 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:
In this case the react modify only the classname on the underlying DOM node and similar thing applied for style property.
Original DOM <h1 classname=”old”> Understanding Reconciliation in react </h1> NEW DOM <h1 classname=”new”> Understanding Reconciliation in react </h1>
Type 3: When it recursing over the children
When it recurses over the children, then by default, it traverses over the children of the list and makes 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.
In this case, react will match both the list and make changes at the end of children i.e., insert the new child in the list shown in the new DOM.
Original DOM <ul> <li>Item 1</li> <li> Item 2 </li> </ul> 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.
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.
Original DOM <ul> <li key”one”>Item 1</li> <li key=”two”> Item 2 </li> </ul> NEW DOM <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 understand how reconciliation plays an essential role in making the UI fast and how to increase the performance of an application, as it doesn’t wholly update your DOM. It will change only wherever these updations occur.
Hey, let’s stay in touch!
If you liked this blog, please share it with your friends and colleagues. Connect with FE studio on LinkedIn to read more about such topics.