React is a widely used JavaScript library for building user interfaces. One of the reasons React is so popular is its performance. It efficiently updates the user interface by re-rendering only the necessary parts.

React re-rendering occurs when one of three things are updated:

Prop
State
Context

When any of these change, React will re-evaluate the entire component function, update the component and re-render the DOM.

In this article, we will dive into the re-rendering process in React and how it works.

Let’s first take a look at an example component we are going to use in this article.

Example code

Let’s take a look at an example component called Counter.

This component has a title prop and a count state. When the button is clicked, the handleClick function is called, which updates the count state.

Here is the preview of the code.

To better understand how re-rendering works in React, let’s take a look at the overall process.

Overview

One of the three things – props, state, or context – are updated
The entire component function will be re-evaluated
React then updates the component and tells ReactDOM to update the DOM

Briefly, React uses a virtual DOM (VDOM) to compare the last snapshot with the current snapshot of the component. This process is called diffing. React will only change the part of the DOM that needs to be updated, making it more efficient and faster.

This graph illustrates the overall process of re-rendering.

Let’s dive into how it all works.

React.createElement

When we write a React component, we usually write and return JSX code (line 14 from the code example above). JSX is a syntax sugar which allows engineers to write HTML-like code making it easier to visualise what we are building.

Please note many engineers get confused that JSX is same as HTML, but that’s not true. Basically JSX is easier way to write React.createElement function call. JSX is not a valid HTML and it needs to be complied into JavaScript that can be executed in the browser. This is where React.createElement comes into play in React.

React.createElement takes 3 arguments:

Type: the type of the element which is either a string of HTML tag name (e.g., div, span etc) or a custom component function that returns a React element
Props: the object containing props of the element passing from the parent to child component containing styles, event handlers and data
Children: React elements or strings defining the content of the element

Let’s take a look at the line 16 from the example code again.

This line of JSX code gets compiled into below:

React.createElement(
  "h1",
  { className: "title" },
  "Demo ",
  React.createElement("i", null, title)
);

Then React.createElement returns React element object like below:

{
  "$$typeof": Symbol("react.element"),
  key: null,
  props: {
    children: Array["Demo ", {
      "$$typeof": Symbol("react.element"),
      key: null,
      props: Object {
        children: "Counter",
      },
      ref: null,
      type: "i",
    }],
    className: "title",
  },
  ref: null,
  type: "h1",
}

And ReactDOM traverses the React element object and create DOM nodes.

ReactDOM

When we build React components, we import two packages, React and ReactDOM.

React provides the core functionalities for building UI component, whereas ReactDOM is responsible for rendering React components to the real DOM.

So when any of props, state and context gets changed, the entire component function will be re-evaluated and the component gets updated by React. And React tells ReactDOM to update the real DOM which is re-rendering.

When ReactDOM updates the real DOM, it doesn’t immediately update the entire real DOM because updating on the real DOM causes the reflow and the operation is expensive. Instead ReactDOM only updates the parts that have changed via the virtual DOM.

Virtual DOM

The virtual DOM is just a JavaScript object that represents the attributes and children of the component.

Let’s take a look at the real DOM tree from the initial rendering of our Counter component.

And React takes a snapshot of the real DOM, and creates a current snapshot of the virtual DOM tree in the memory.

Now when React makes changes and triggers the re-rendering, as mentioned already, React doesn’t make changes directly to the real DOM. Instead it will go through a process called Reconciliation.

Reconciliation

When a component’s props, state or context change, React uses a process called reconciliation and React runs the reconciliation algorithm to calculate the diff between the (previous) snapshot and the (current) copy of the snapshot of the component.

So React takes another copy of the last virtual DOM snapshot and make necessary changes to the current copy.

Once the changes are complete, React reconciler compares the last snapshot (Virtual DOM Snapshot) and current copy (Virtual DOM Copy) and figure out which part should only need changes, and then React renderer updates the real DOM with the minimum set of changes required to bring it in sync with the new copy of Virtual DOM.

This process happening in the memory is much quicker than updating the real DOM on every single update and it helps to improve the performance of the application and reduce the workload of the browser.

Partial updating in real DOM

Now from our code example, let’s imagine that we have clicked the button so the count state gets changed. As the state gets updated, it will trigger the re-rendering process.

From the screen capture below, when we click on the button, it updates the count state and only updates the <p className="description">You clicked {count} times.</p> in the real DOM as that portion is flashed in Chrome DevTool.

To even further improve it, React team has completely rewritten the reconciliation algorithm and introduced new algorithm called React Fiber discussed in the following section. But before diving in to React Fiber, let’s quickly take a look at scheduling and batching.

Scheduling and Batching

React’s scheduling and batching mechanisms ensure that updates are processed in an optimal way, reducing the workload of the browser and improving the user experience.

Scheduling

React uses the scheduling mechanism to prioritise updates. When an update is scheduled, React doesn’t immediately perform it. Instead, it will adds the update to a queue of pending updates and waits for the next idle moment to perform the updates when the browser is not busy with other tasks. This allows to optimise the order and timing of updates and avoid the freeze or lagging during rendering.

Batching

In addition to scheduling, when multiple state updates occur at the same time, instead of triggering every single update separately, React will batch them and trigger in a single update. This helps avoid the unnecessary number of re-renders and improve the overall performance of the reconciliation process.

Automatic batching

React 18 introduces automatic batching, which is a new feature that improves performance by batching all updates, no matter where they originate from. It helps avoid unnecessary re-renders, prevents components from rendering “half-finished” states, and makes the application more performant.

From the example above, let’s add one more state update called setActive.

import { useState } from "react";

interface CounterProps {
  title: string;
}

export default function Counter({title}: CounterProps) {
  const [count, setCount] = useState(0);
  const [active, setActive] = useState(false);

  function handleClick() {
    setCount(count + 1);
    setActive(!active);
  }

  return (
    
      Demo {title}
      You clicked {count} times.
      
    
  );
}

In React 17 and earlier, it still re-renders once at the end.

However, updates outside of the event handlers such as promise or setTimeout were not batched as the below example. That’s because in the earlier version of React only batched updates during a browser event such as click, but the below example is updating the state after the event handler such as fetch callback.

import { useState } from "react";

interface CounterProps {
  title: string;
}

export default function Counter({title}: CounterProps) {
  const [count, setCount] = useState(0);
  const [active, setActive] = useState(false);

  function handleClick() {
    fetch('/api').then(() => {
      // they are batched separately in React 17 or earlier,
      // but in React 18, all updates are automatically batched.
      setCount(count + 1);
      setActive(!active);
    });
  }

  return (
    
      Demo {title}
      You clicked {count} times.
      
    
  );
}

In React 18, with the introduction of automatic batching, all updates will be automatically batched, resulting in better performance.

For instance, consider a button click event in the above example where we make a couple of state updates. React 18 will group these updates into a single re-render, even if we update the state after the event has already been handled.

The automatic batching works for all types of events, including timeouts, promises, native event handlers, and any other events.

One thing to note is in order to use automatic batching, it is recommended to upgrade to createRoot as part of adopting React 18.

React Fiber

React Fiber was introduced in React 16 and it is a complete rewrite of reconciliation algorithm.

The old reconciliation algorithm was handling the updates synchronously and uses a single thread (as JavaScript is single-threaded), therefore, it could sometimes block the main thread and cause performance issues, especially working in the large and complex component trees.

To solve this problem, React Core team introduced React Fiber, a new asynchronous rendering model that breaks up the rendering process into smaller chunks called “Fibers”.

The React Fiber reconciler uses the fibers which can be processed over multiple frames without blocking the main thread. This enables React to prioritise and schedule updates more effectively, leading to faster rendering and improved user experience.

To learn more about React Fiber, I highly recommend to check out those great videos:

“What Is React Fiber?” by Philip Fabianek.

“React Fiber Deep Dive” with Dan Abramov

“A Cartoon Intro to Fiber” with Lin Clark

Concurrent rendering

React 18 introduces a new rendering mode called “Concurrent Rendering” which builds on the foundation by taking advantage of React Fiber’s scheduling capabilities. It allows developers to break up tasks into smaller, more manageable pieces, and then uses the new APIs and features in React 18 to control how those pieces are rendered and updated.

It provides better performance and user experience by prioritising the rendering of important content and reducing the time spent on less critical tasks.

Watch this great video to learn more about the story of concurrent React.

Optimising the rendering

In addition to Concurrent Rendering, React provides several tools to optimise rendering and avoid unnecessary re-renders. These tools include React.memo, useMemo, and useCallback.

React.memo: a higher-order component returning memoized version of the component.
useMemo: a hook returning a memoized value
useCallback: a hook returning a memoized function

~~I am going to publish another article about these tools in more detail to optimise React app and improve the performance in the near future, so stay tuned!~~

Update: React has introduced the React Compiler, which will automatically optimize without needing the hooks mentioned above. This is a critical feature, and I have published an article about the React Compiler alongside the hooks. Make sure to read this article to understand how it works.

Conclusion

By understanding how React re-rendering process works, engineers can optimise their code and create fast and efficient web applications. I hope you found it informative and useful. If you’d like to expand your knowledge of React, consider subscribing to our newsletter to keep up-to-date with the latest frontend technologies.