How to improve slow React application rendering ?

Last Updated : 25 Jul, 2024

Slow React application rendering as its name suggests is a small or large delay in rendering elements. There may be multiple reasons for that. React uses the concept of Virtual DOM. All the elements in React are rendered using the render method in which we have to provide an id of an element (mostly div) to be rendered. Every element in React is immutable. Hence, to Update the element, we have to call the Render method again.

Prerequisites:

Approach to Improve Slow React Application Rendering:

Slow React Application Rendering may occur due to heavy components, images, bad code practices unnecessary renders due to changes in states. This problem can be reduced by code splitting, avoiding unnecessary re-renders and memoization. We will be using useMemo hook to reduce calculations and updates to improve rendering.

Steps to create React Application

Step 1: Create a React application using the following command:

npx create-react-app useMemo

Step 2: After creating your project folder i.e. useMemo, move to it using the following command:

cd useMemo

Project Structure:

Example 1: This example uses useState hook to store and update state and render on UI.

JavaScript

// Filename - App.js

import { useState } from "react";
import "./App.css";

export default function App() {
    // 1st counter state
    const [counter1, setCounter1] = useState(0);

    // 2nd counter state
    const [counter2, setCounter2] = useState(0);

    // Sample Heavy Calculation Function
    const heavyCalculation = () => {
        let i = 0;
        for (let outer = 0; outer < 10000; outer++) {
            for (let temp = 0; temp < 10000; temp++) {
                while (i < 10000) i++;
            }
        }
        return counter1 % 2 === 0 ? true : false;
    };

    return (
        <div className="App">
            {heavyCalculation()
                ? `Counter is even with value ${counter1}`
                : `Counter is odd with value ${counter1}`}
            <br />
            <button
                onClick={() => {
                    setCounter1(counter1 + 1);
                }}
            >
                Increment counter1
            </button>
            <br />
            Counter 2 is {counter2}
            <br />
            <button
                onClick={() => {
                    setCounter2(counter2 + 1);
                }}
            >
                Increment counter2
            </button>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Here, in the output, a heavy function is being called on Rendering. Now even though it is being used for the first counter, but it still causes render due to counter2 slow.

Example 2: This example implements useMemo Hook to avoid unnecessary update and hence reduce rerenders on the UI.

App.js

import { useState, useMemo } from "react";
import "./App.css";

export default function App() {

  // 1st counter state
  const [counter1, setCounter1] = useState(0);

  // 2nd counter state
  const [counter2, setCounter2] = useState(0);

  // Our custom useMemo Function
  const useMemoFunction = useMemo(() => {
    let i = 0;
    for (let outer = 0; outer < 10000; outer++) {
      for (let temp = 0; temp < 10000; temp++) {
        while (i < 10000) i++;
      }
    }
    return counter1 % 2 === 0 ? true : false;
  }, [counter1]);

  return (
    <div className="App">
      {useMemoFunction
        ? `Counter is even with value ${counter1}`
        : `Counter is odd with value ${counter1}`}
      <br />
      <button
        onClick={() => {
          setCounter1(counter1 + 1);
        }}
      >
        Increment counter1
      </button>
      <br />
      Counter 2 is {counter2}
      <br />
      <button
        onClick={() => {
          setCounter2(counter2 + 1);
        }}
      >
        Increment counter2
      </button>
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Here, heavy functionality is used by useMemo hook containing counter1 as a dependency. Due to this Counter1 still shows delay, but it does not affect the performance of counter2.