In the browser, DOM manipulation is expensive and time-consuming, both in mounting and unmounting. Part of what makes React very performant is its Reconciliation algorithm. In short, it watches closely for differences, only updates the DOM when necessary, and tries to update only the parts which need to be changed.
In this blog, we will explore how DOM manipulation gets easier with the reconciliation algorithm and see how it works with examples.
What is the reconciliation algorithm?
React employs the reconciliation algorithm to DOM manipulation in response to changes in the component state. When the state of a component changes, React will re-render the component and its descendants. The reconciliation algorithm is in charge of determining what has changed in the component tree and updating the DOM as needed.
React uses a virtual DOM (VDOM) to represent the structure of the components in memory. The virtual DOM is a lightweight in-memory representation of the DOM. And it’s used by react to compare the new state of the component tree with the previous state.
If there are any differences, React will update the real DOM to match the new state.
How does the reconciliation algorithm work?
The reconciliation procedure begins by comparing the old state’s virtual DOM to the current state’s virtual DOM.
If no differences exist, React will not make any changes to the real DOM. If there are any discrepancies, React will update the true DOM to reflect the new state.
To discover the most efficient way to update the real DOM, React employs a heuristic approach. The method initially determines whether a component’s type has changed, such as from a simple text component to a complicated component with several children. React will unmount the old component and mount the new component if the component type has changed.
React also uses a technique called reusing existing DOM nodes to make the updates more efficient. If a component has not changed its type and its properties have not changed, React will reuse the existing DOM node for that component. This allows React to avoid unnecessary DOM updates and makes the updates faster.
Example
Let’s take an example to understand the reconciliation algorithm in action:
In this example, when the button is clicked and the name state changes, React will run the reconciliation algorithm to update the real DOM to match the new state.
React will start by comparing the virtual DOM of the previous state with the virtual DOM of the new state.
Since the component type has not changed, React will reuse the existing DOM node for the Greeting component, then it will update the text content of the h1 element to match the new name mz2.
In this example, the reconciliation algorithm has made a single DOM update to change the text content of the h1 element.
Optimizing the performance using Keys
In React, the use of keys is important when rendering a list of elements. Keys are a special string attribute that you can provide to elements in a list to help React keep track of which items are added, deleted, or changed.
Consider the following example of a list of names:
In this example, we’re using the map function to render a list of li elements. Each with a name from the names array. If the names array changes, React will use the reconciliation algorithm to update the DOM.
Conclusion
The “diff algorithm” and the “reconciliation algorithm” are often used interchangeably to refer to the same thing in the context of React. However, there is a subtle difference between the two terms.
The Diff algorithm refers to the process of comparing two trees of nodes, like virtual DOM trees in React to determine the differences between them. The diff algorithm determines the minimum number of operations required to transform one tree into another.
The reconciliation algorithm refers to the overall process of updating the DOM in response to changes in the component state. The reconciliation algorithm includes the diff algorithm as one of its steps. It also includes additional steps such as unmounting and mounting components, updating component properties and handling error cases.
For more updates on such topics, please follow our LinkedIn page- FrontEnd Studio.