React is a popular library for building user interfaces. One of the key features of React is that it uses a virtual DOM, which is a lightweight representation of the real DOM, to keep track of the UI state. In this post, I will explain how React reconciles the virtual DOM with the real DOM and why it is important for performance and simplicity.
What is reconciliation?
Reconciliation is the process of finding the minimal set of changes to update the UI based on the state changes in the components. React does this by comparing the current virtual DOM tree with the previous one and applying only the necessary DOM operations.
For example, suppose we have a component that renders a list of items:
function List(props) {
return (
<ul>
{props.items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
);
}
If we render this component with an initial array of items, React will create a virtual DOM tree that looks something like this:
<ul>
<li key="1">Apple</li>
<li key="2">Banana</li>
<li key="3">Cherry</li>
</ul>
React will then create and append the corresponding DOM nodes to the real DOM.
Now, if we update the state of the component by adding an item at the end of the array, React will create a new virtual DOM tree that looks like this:
<ul>
<li key="1">Apple</li>
<li key="2">Banana</li>
<li key="3">Cherry</li>
<li key="4">Date</li>
</ul>
React will then compare the new tree with the old one and find out that only one node has been added. It will then create and append a new
However, if we update the state of the component by inserting an item in the middle of the array, React will create a new virtual DOM tree that looks like this:
<ul>
<li key="1">Apple</li>
<li key="2">Banana</li>
<li key="5">Eggplant</li>
<li key="3">Cherry</li>
<li key="4">Date</li>
</ul>
React will then compare the new tree with the old one and find out that four nodes have changed. It will then update and move the existing <li> nodes and create and append a new <li> node to the real DOM.
How does reconciliation work?
Reconciliation is based on two assumptions:
Two elements of different types will produce different trees. For example, if we change a <div> to a <span>, React will replace the whole subtree under that node.
The developer can hint at which child elements may be stable across different renders with a key prop. For example, if we have a list of items that can be reordered or filtered, we should assign a key prop to each item that uniquely identifies it.
Based on these assumptions, React can perform a fast and efficient algorithm that only updates the nodes that have changed. The algorithm works as follows:
React starts from the root node and compares each pair of nodes in both trees.
If the root nodes are of different types, React discards the old tree and builds a new one from scratch.
If the root nodes are of the same type, React updates their attributes and recurses on their children.
When recursing on the children, React uses the key prop to match them. If a child with a certain key is present in both trees, React updates it. If a child with a certain key is only present in the new tree, React creates it. If a child with a certain key is only present in the old tree, React deletes it.
Why is reconciliation important?
Reconciliation is important for two reasons: performance and simplicity.
Performance: Reconciliation allows React to avoid unnecessary DOM operations, which are costly to access and modify. By using a virtual DOM, React can perform all the computations in memory and apply only the minimal changes to the real DOM. This makes React fast and responsive.
Simplicity: Reconciliation allows React to be declarative and abstract away the complexity of DOM manipulation. The developer only needs to specify how the UI should look based on the state and props, and React takes care of updating it accordingly. This makes React easy to use and reason about.
I hope you found this post useful and informative. If you have any questions or any feedback, feel free to leave a comment below. Happy coding!