How to improve slow React application rendering ?
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.
Contact Us