What is Reconciliation?

A React application comprises of various React components, the components are organized in a tree structure with a root component and other child / nested components. When the React application loads it creates the component tree in memory called the Virtual DOM. Whenever a component gets updated in the tree React runs an algorithm to determine what changes should be made to the DOM to reflect the changes in the UI, this process of comparing the changes to update the DOM is called Reconciliation.

React reconciliation is based on 2 assumptions

1    Two elements of different types will produce different trees.

2    The developer can hint at which child elements may be stable across different renders with a key prop.

1. When the root component in the tree gets updated then the tree will be re-constructed. All the components under the root will be destroyed and re-created. When the root node gets changed the componentWillUnmount lifecycle method will be triggered to all the child nodes to destroy the nodes and the child components will be re-build and the lifecycle methods componentWillMount and componentDidMount get triggered in the re-build process.

2. When the reconciliation process is applied to a list of elements the performance of reconciliation varies based on the position of the change to the list. If an element is added to the end of the list then performance is not affected much, but if an element is added to the beginning of the list then the performance of reconciliation process is poor. 

To overcome this performance issue React supports the Keys attribute to the list element. When we create a list in a React component add a unique key attribute, with this React used the key value to match the key of the element in the original tree with the new tree and efficiently determine changes / addition of items to the list.

React Fiber brings improvement to this reconciliation process. The process of reconciliation before the React Fiber was a continuous one, once it starts at the root node it will continue till it traverses and compares all the nodes till the leaf node. This process is expensive, if there are many child components are more / complex then it takes more time to complete this reconciliation process as a result the responsiveness in the UI will be slow.

The React Fiber brings improvement to this algorithm instead of doing this process continuously it can automatically suspend the activity of some components and give priority to other components that are more important for the current state of the application, thereby improves the performance of reconciliation and improves the UI responsiveness.