How to Optimize Your React App for Performance published 3/19/2023 | 4 min read

As front-end developers, we want to build applications that are not only functional but performant as well. In this article, we will explore the different ways to optimize a React application for maximum performance.

1. Use React.memo

React.memo is a higher-order component (HOC) that memoizes a component. Memoizing ensures that if the input props passed to the component have not changed, then it will not be re-rendered. This saves a lot of rendering time and reduces unwanted workload.

  
import React, { memo } from 'react';

interface Props {
  firstName: string;
  lastName: string;
}

const User = memo(({ firstName, lastName }: Props) => {
  console.log(`Rendering ${firstName} ${lastName}`);
  return (
    <div>
      <h2>{firstName}</h2>
      <h2>{lastName}</h2>
    </div>
  );
});

2. Lazy Load Your Components

Instead of loading all components at once, lazy loading helps in splitting the code into smaller chunks that will only load when required. React comes with a React.lazy method that helps to load components on-demand.

  
const LazyComponent = React.lazy(() => import('./path/to/component'));

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

3. Use Code Splitting

Code splitting breaks the application code into smaller pieces that can be loaded as required. This results in faster initial load times, which is important for first-time users of the application.

  
import { lazy } from 'react';
import { Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}

4. Optimize Image Loading

Images can take a long time to load, which slows down the application. To optimize image loading, you can do the following:

Compress images to reduce their size without losing quality.
Use the width and height attributes to define the image dimensions, which helps the browser render the image faster.
Consider using a lazy loading technique.

  
<img src="path/to/image.jpg" alt="Image" width="250" height="250">

5. Memoize Expensive Computation with useMemo

UseMemo is another higher-order component in React that memoizes values of an expensive function or operation. This helps to reduce the number of times the function is called, which results in better performance.

  
import { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const expensiveValue = useMemo(() => {
    // Perform some expensive computation here
    return data.map((item) => item * 2);
  }, [data]);

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

6. Optimize Re-Renders with useCallback

UseCallback is a hook in React that memoizes callback functions. It helps optimize re-renders by passing the same reference of a function to child components if their dependencies have not changed.

  
import { useCallback, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <div>{count}</div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

7. Use the Profiler API

The React Profiler API helps in understanding the performance of your application by profiling its components. Profiling can identify which components are taking the longest to render or re-render, helping you identify which components require optimization.

  
import React, { Profiler } from 'react';

function logProfiledData(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
) {
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    <Profiler id="My App" onRender={logProfiledData}>
      {/* Your components here */}
    </Profiler>
  );
}

In conclusion, by implementing the above-mentioned tips, you can improve your React app's performance and deliver an excellent user experience. Remember to keep performance in mind throughout the application development process to ensure optimal performance. Thanks for reading!

Happy coding!