How Diffing Algorithm works (React Reconciliation Process)

Reconciliation process image

Before understanding the Reconciliation Process, let’s understand Virtual DOM (VDOM) and its importance for React.

What is a Virtual DOM

  • The Virtual DOM (VDOM) is an in-memory representation of the actual DOM elements of a web page.
  • It is a lightweight copy of the real DOM, used primarily by libraries like React to enhance performance by minimizing direct manipulation of the real DOM

Actual Representation of VDOM

// A virtual DOM element
const virtualElement = {
 type: 'section',
 props: {
 className: 'news-section',
 },
 children: [
 {
 type: 'p',
 props: {
 className: 'information',
 },
 children: ['Some News!'],
 },
 ],
};

// Render the virtual DOM element to the actual DOM
const container = document.getElementById('root');
ReactDOM.render(virtualElement, container);
  • In the given JSON of Virtual DOM, we create a virtual DOM element representing a <section> with a <p> child element.
  • We then use ReactDOM to render the virtual DOM element to the actual DOM.
  • React will efficiently update the actual DOM based on the changes in the virtual DOM, resulting in a smooth and performant rendering process.
Now that we understand the virtual DOM, let’s examine the reconciliation process within it.

Reconciliation Process

Reconciliation is the process of updating the Virtual DOM and the actual DOM in response to changes in the application state. When a state change occurs, React creates a new Virtual DOM tree representing the updated state. React then diffs this new Virtual DOM tree against the previous Virtual DOM tree to determine the minimal set of changes needed to update the actual DOM.

To identify the changes, React uses Diffing Algorithm

Diffing Algorithm

To identify the changes between the older version of virtual DOM and the current version of virtual DOM after a state update, React uses something called Diffing Algorithm.

These are the steps performed in the Diffing Algorithm.

1. Tree Comparison: Virtual DOM structure is in the tree form. React compares the structures of two trees the older one before the state update and after the state update, node by node.

2. Finding out changes: It identifies the differences such as added, removed or modified nodes.

3. DOM manipulations: React calculates the minimum number of DOM operations that need to be done to update the real DOM to match the new virtual DOM.

Let’s take an example to understand it better

Use Case:

Consider a web page with a button that, when clicked, displays a form on the user interface. How does the reconciliation and diffing algorithm handle this scenario?

  1. When a user clicks on the button this triggers a state change in the parent component
  2. This state change creates a new virtual DOM with the form component added.
  3. React compares the old and new virtual DOMs, identifying the newly added form component
  4. React now updates the real DOM by adding the form element.

Conclusion:

The reconciliation process and diffing algorithm enable React to efficiently update the real DOM by leveraging the virtual DOM. By identifying changes and applying minimal updates, React ensures fast performance and smooth user experiences. This approach simplifies development and optimizes rendering, making React ideal for dynamic, interactive web applications.

Queries and Doubts

Thanks for the read :) Hope you have enjoyed reading it 🤩 and learnt something new today.

If you have any doubts or queries feel free to drop a comment or

⁍ Connect with me on my 🔗Topmate 💬.

⁍ You can also reach out to me on my 🔗LinkedIn.

⁍ Please clap for this post if you enjoyed reading it 📗 and follow for more interesting articles.

⁍ You can also support me and my writings by treating me to a nice virtual cup of coffee ☕️.