Boost Your React Application’s Speed with These Performance Optimization Techniques

As a React Technology-Based Application user, you may have come across performance issues while working with large or complex components which ultimately, can impact the success of your application. To optimize React components, it’s essential to use various techniques. In this blog, we will explore some optimization techniques that can help improve the performance of your React components.

Code Splitting

Code splitting is a technique used to split large bundles into smaller chunks that can be loaded on demand. With code splitting, you can reduce the initial load time of your application and improve its performance. React provides built-in support for code splitting through dynamic imports. Dynamic imports allow you to load modules on demand, which can be useful when dealing with large components or libraries.
Here’s an example of how to use dynamic imports in React:

import React , {lazy , Suspense} from 'react';
const MyComponent = lazy(() => import('./MyComponent'));

function App() {
    return (
        <div>
         <Suspense fallback={<div>Loading...</div>}>
          <MyComponent/>
         </Suspense>
        </div>
    );

}
export default App;

In this example, we’re using the lazy function to load MyComponent on demand. We’re also using the Suspense component to provide a fallback UI while the component is being loaded.

Lazy Loading Technique

Lazy loading is similar to code splitting, but it’s specifically used to delay the loading of non-critical resources, such as images or videos until they are needed. By using lazy loading, we can improve the initial load time of our application and reduce the amount of data that needs to be downloaded.
Here’s an example of how to use React.lazy in React:

import React , {lazy , Suspense} from 'react';
const MyImage = lazy(() => import('./MyImage'));

function App() {
    return (
        <div>
         <Suspense fallback={<div>Loading...</div>}>
          <MyImage src="image.png" alt="My Image"/>
         </Suspense>
        </div>
    );
}
export default App;

In this example, we’ve used the lazy() function to load MyImage asynchronously. The Suspense component is used to display a loading indicator while the image is being loaded.

Memoization Technique

Memoization is a technique used to improve the performance of functions that are called frequently. This technique involves caching the results of a function so that it does not have to be re-calculated every time it is called.
Here’s an example of how to use React.memo in React:

import React,{ useMemo } from 'react';

function App() {
    const numbers = [1, 2, 3, 4, 5];

    const sum = useMemo(() => {
        console.log('Calculating sum...');
        return numbers.reduce((a, b) => a + b, 0);
    },[numbers]);

return <div>{sum}</div>;
}

export default App;

In this example, we are using the useMemo() hook from React to cache the result of our sum function. The useMemo() hook takes a function and an array of dependencies, and it only re-calculates the result if any of the dependencies have changed.

Virtualization Technique

Virtualization is a technique used to optimize the performance of large lists or tables by rendering only the visible items. With virtualization, you can reduce the number of DOM nodes and improve the performance of your application. React provides built-in support for virtualization through the react-window library. react-window allows you to render only the visible items in a list or table, which can be useful when dealing with large lists or tables.
Here’s an example of how to use react-window in React:

import React from 'react';
import { FixedSizeList } from  'react-window';

function App() {
    const data=[...]; //Array of data to display

    const renderItem=({ index , style })=>{
        const item=data[index];
        return <div style={style}>{item}</div>;
    };

    return (
        <div>
         <FixedSizeList
           height={500} // Height of the visible window
           itemCount={data.length} // Total number of items
           itemSize={50} // Height of the each item
           width="100%" // width of the visible window
        >
            {renderItem}
         </FixedSizeList>
        </div>
    );
}

export default App;

In this example, we have used the FixedSizeList component from the react-window library to implement windowing. The height and width props determine the height and width of the visible window, and the itemCount prop determines the total number of items in the list. The itemSize prop determines the height of each item in the list.

The renderItem function is called for each item in the visible window and returns a div element with the appropriate style. By using react-window, we can ensure that only the items that are currently visible in the window are rendered, and the rest of the items are virtualized.

Using React Profiler

React Profiler is a built-in tool in the React library that allows you to measure the performance of your components and identify which components are causing performance issues. It provides you with detailed information about the time taken by each component to render, the number of times it was rendered, and the time taken to update it. To use React Profiler, you need to add the <Profiler> component to your application and wrap it around the component or components you want to measure.
Here’s an example:

import React , { Profiler } from 'react';

function App() {
    const onRender = (id, phase, actualDuration,
        baseDuration, startTime, commitTime, interactions) => {
        console.log(`${id}'s ${phase} phase:`);
        console.log(`Actual duration: ${actualDuration}`);
        console.log(`Base duration: ${baseDuration}`);
        console.log(`Start Time: ${startTime}`);
        console.log(`Commit Time: ${commitTime}`);
        console.log(`Interactions: ${interactions}`);
    };

    return (
        <div>
         <Profiler id="MyComponent" onRender={onRender}>
          <MyComponent/>
         </Profiler>
        </div>
    );

}

export default App;

In this example, we have used the <Profiler> component to wrap the <MyComponent> component. We have also defined an onRender function that logs the performance information of the component during the various phases of rendering.

The id prop of the <Profiler> component is a unique identifier for the component being measured. The onRender prop is a callback function that is called each time the component is rendered. It provides information about the duration of each rendering phase, start and commit times, and any interactions that occurred during the rendering.

Using the information provided by the React Profiler, you can identify which components are causing performance issues and optimize them. For example, you can use techniques such as memoization, lazy loading, and virtualization to improve the performance of your components.

Stay tuned for the next part of this series, where we will cover another performance optimization technique for React applications.