Nextjs

React has become a household name for building dynamic and interactive user interfaces. But have you ever wondered how React manages to efficiently render components and update the DOM? Let’s dive into the inner workings of React rendering to uncover its magic. This post is part of a large serious I write about react basics, feel free to check out the entire list here: reactjs basics.

DOM and Virtual DOM

To understand React’s rendering process, we first need to grasp the concept of the Document Object Model (DOM). The DOM is a tree-like structure that represents the elements of a web page. Each HTML element is a node in this tree, and the browser uses the DOM to render and update the page.

React introduces the concept of a Virtual DOM. Instead of directly interacting with the actual DOM, React creates a lightweight copy of the DOM called the Virtual DOM. This virtual representation allows React to perform operations efficiently without directly manipulating the real DOM.

Reconciliation

When you make changes to a React component, such as updating its state or props, React needs to determine how these changes affect the UI. This process is known as reconciliation.

Reconciliation involves three main steps:

1. Diffing: React compares the previous Virtual DOM with the new Virtual DOM to identify the differences or “diffs” between the two. It determines which parts of the DOM need to be updated based on these differences.
2. Re-rendering: React updates the components affected by the changes in the Virtual DOM. It creates a new Virtual DOM representing the updated UI.
3. Updating the DOM: Finally, React updates the actual DOM with the changes. However, instead of re-rendering the entire DOM, React only updates the specific parts that have changed, making the process more efficient.

Example Scenario: Updating a List of Items

Let’s consider a simple example to illustrate how React rendering works. Suppose you have a React component that displays a list of items. When you add a new item to the list, here’s what happens:

1. You update the component’s state to include the new item.
2. React triggers a re-render of the component.
3. React compares the previous and new Virtual DOM to identify the added item.
4. React updates the DOM to include the new item, without re-rendering the entire list.

Various Rendering Approach

Name	Rendering Description	Performance Level	Technology
Direct DOM Manipulation	Manipulating the DOM directly using JavaScript. Can be fast for simple operations but can lead to performance issues and messy code.	Weak	Vanilla JavaScript
Server-Side Rendering	Rendering initial HTML on the server before sending it to the client. Improves perceived performance and SEO but can be challenging to maintain for complex applications.	Very Good	Node.js, React, Angular
Incremental DOM	Updates only the parts of the DOM that have changed without creating a full virtual representation. Reduces memory overhead compared to a full virtual DOM.	Very Good	Angular, Preact
Static Site Generation	Pre-rendering entire pages at build time and serving them as static HTML files. Results in very fast loading times but may not be suitable for dynamic content.	Very Good	Next.js, Gatsby
Web Components	Creating custom, reusable components using standard HTML, CSS, and JavaScript. Can be used with or without a framework and offers a more native approach to building web applications.	Very Good	Custom Elements, Polymer
Vue.js	Progressive JavaScript framework with a reactivity system similar to React’s Virtual DOM. Offers a template-based approach that some developers find easier to understand and work with.	Very Good	Vue.js
Fine-grained Reactivity	A rendering approach that updates only the components affected by state changes, rather than re-rendering the entire component tree. This can lead to more efficient updates and better performance, especially for complex applications.	Very Good	Svelte, vuejs

In addition to what rendering approach we might pick for our web application, when we pick a single approach we need to remember that the performance is highly effected by how we write the code and how we use each and one of the library or the paradigm approach. For example in virtual DOM and react we’ll want to use key props to improve dynamic list of elements that we want to render because we want to help the rendering engine of each to distinguish between each and every row of elements that otherwise looks the same.

Conclusion

In conclusion, React’s rendering process revolves around the concept of the Virtual DOM and reconciliation. By efficiently diffing the Virtual DOM and updating only the necessary parts of the actual DOM, React ensures that your web applications remain responsive and performant.

Understanding these fundamental concepts is crucial for mastering React and building robust and efficient user interfaces. So, the next time you work with React, remember the magic happening behind the scenes to make your applications come to life and also remember that it’s up to you as an engineer to optimise your code, like using useMemo, useCallback, use react key props and more! If you want me to write article about key performance in react – let me know in the contact page or in the comment section below.