[React] Rendering in React

🧚🏻‍♀️ Understanding Rendering in React

Motivation

I've been working on projects using React for some time now, but I've realized that if someone were to ask me, "How does React work?" I would probably freeze up and feel dumbest. Being a visual learner myself, I've decided to break it down from the basic part of React using diagrams and example codes to make it easier to understand.

What is Rendering?

Rendering refers to the process of generating and displaying the final output of a web application or user interface.

Rendering in React

In React, rendering specifically refers to how React updates and displays components on the screen based on changes in their state or props.

Initial Rendering

Let’s take a look at how React performs its initial render.

React uses root.render() method to initially display components, represented by JSX or React nodes, inside the browser's DOM.

If your app is fully built with React, your code will look like this:

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <!-- This is the DOM node -->
    <div id="root"></div>
  </body>
</html>

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Once you run this code, it will

Find the browser DOM node(root) defined in your HTML.
Display the React component for your app inside.

After the initial rendering, React re-renders its components only when there are changes to the state or props of the components.

Below are the visualised flow charts of React initial render(mounting) and re-render process.

Rendering seems more complicated than root.render()?

With the understanding of Virtual DOM, you'll get a bit more idea.

Virtual DOM?

The Virtual DOM is a concept used by React to optimise the process of updating the user interface. It is a lightweight, in-memory representation of the actual browser DOM (Document Object Model).

During initial render, React creates a Virtual DOM representation of the UI, takes the React elements and converts them into corresponding DOM elements. This conversion process involves creating the necessary DOM nodes and assigning properties and attributes to them based on the React elements. React then inject Virtual DOM elements to browser’s actual DOM elements.

Re-Rendering

As described above, React re-renders the component(s) only when it needs to. Here is the process of re-rendering.

React invokes the component's render method or functional component body to generate a new virtual DOM representation of the component.
React creates a new Virtual DOM and compares it to exisiting Virtual DOM using **diffing algorithm.** (Reconciliation)
Once the diffing process identifies the differences between the previous and new virtual DOM, React applies the necessary changes, or "patches," to the actual DOM to reflect the updates made in the virtual DOM.

When Does React Re-Render?

When there are changes to component’s props or **states**
When the context value changes
When parent component re-renders

A Toe Dip Into Reconciliation
In short, it is the process of comparing the previous state of a component's rendered output (virtual DOM) with the new state and determining the minimal set of changes needed to update the UI. React uses the diffing algorithm to perform the comparison.
React implements a heuristic algorithm based on the following two assumptions, resulting in an O(n) time complexity:
1. Different types of elements create different trees.
For elements of the same type, only the changed attributes are updated.
2. Developers can use the key prop to identify component instances and indicate which child elements should not be changed between multiple renders.
By comparing and updating only the necessary parts of the DOM, React minimizes the performance impact and improves the efficiency of rendering, resulting in a more responsive and optimized user interface.

Conclusion

In this blog post, I've taken the time to simplify the fundamentals of React rendering using visuals and practical examples. By breaking down the rendering process and explaining concepts like initial rendering, the Virtual DOM, and re-rendering, I hope that I have provided a clearer understanding of how React works.

Happy coding!