Reconciliation is a process in React that helps it update the UI efficiently. Whenever something changes in your app, like the data or state, React needs to update the web page to reflect those changes. Instead of reloading the entire page, React uses reconciliation to make just the necessary updates, saving time and resources.
What is Virtual DOM ?
The Virtual DOM is a lightweight, in-memory representation of the real DOM. It helps React manage UI updates more efficiently by keeping a virtual version of the UI in memory. When changes occur, React updates only the necessary parts of the real DOM, instead of re-rendering everything.
React render process
Rendering is React’s process of describing a UI based on the application’s current state and props. The initial render in a React app is the first render when the application starts up, while re-rendering occurs when there is a change in the state to figure out which parts of the UI need an update.
Below is a description of the rendering process for initial render and re-render.
What reconciliation (Diffing algorithm) ?
React’s reconciliation algorithm three phases following:
- Render : It constructs a virtual DOM tree based on the component’s current state and props during this phase. The virtual DOM acts as a lightweight representation of the actual DOM.
- Reconciliation: React compares the previous virtual DOM with the new one once the render phase is complete. It identifies differences between the two and creates a list of minimal updates required to synchronize the actual DOM with the updated virtual DOM.
- Commit: In the final phase, React applies the calculated updates to the actual DOM, ensuring it accurately reflects the current component state.
The reconciliation algorithm is run whenever the component level state is updated. It analyzes the current DOM with the Virtual DOM, in order to determine which changes need to be made to the real DOM. After this step, it has determined which DOM nodes on your application require updates, and it calls the render method.
The comparison algorithm follows these key principles:
Different Element Type
If the elements are of different types, React will replace the old element with the new one.
Example: This will destroy the old Counter component and remount a new one.
Different attribute but same type
When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes.
Example: By comparing these two elements, React knows to only modify the className on the underlying DOM node.
Key comparison
If elements are of the same type but have different keys, React will treat them as different elements and replace the old one with the new one.
Example: Now React knows that the element with key '2014' is the new one, and the elements with the keys '2015' and '2016' have just moved.
Props and state comparison
If elements are of the same type and have the same keys, React will compare their props and state to determine what has changed.
Conclusion
Understanding React’s reconciliation algorithm reveals the “why” behind many React performance patterns. It explains why composition works so well, why we need keys for lists, and why defining components inside other components is problematic.