5 Ways To Optimize Your React App Performance 2023

Image by catalyststuff on Freepik

Do you know that the performance of your React application can directly impact your conversion and retention rates?

Making your pages faster and more optimized can make for a great user experience.

In this article, I'm going to show you 5 ways to improve your React app performance.

Let's dive in.

Use in-browser tools to monitor performance

Browser tools and extensions are great ways of measuring your app performance. With a tool like React Dev tool, you can check what components are rendering and why they are rendering. This can help you identify unnecessary re-rendering and reasons why it is happening. This way you can work on your app to mitigate the unnecessary re-renders.

Windowing or list virtualization

This technique is useful for apps that displays a long list. Windowing involves displaying a limited number of the list and load others on-demand.
This can greatly improve the performance of your React applications. There are two great libraries for implementing list virtualization in react: react-window and react-list-virtualization.

Lazy loading components

Loading components only when they are needed is another great way to improve your React app performance.
Use lazy() function and Suspense component to lazy load components.
The lazy() function only accepts a function as an argument which must call a dynamic import statement. It returns a promise which resolves to a React component.
The component can then be wrapped inside a Suspense component with a specified fallback component (loading indicator) that displays while the component is being loaded.

import React, { lazy, Suspense } from 'react';

// Lazy load the component
const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My App</h1>

      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Keep states local when necessary

When the state of a component changes, React re-renders the component along with its children. For small apps, this poses no problem. For apps that have components that perform expensive calculation before rendering, this can significantly reduce your app performance.
To avoid unnecessary re-rendering of components, you want to keep states local to only the components that care about the state.
Though, this is not always feasible as some states need to be global.

Use useMemo and useCallback hooks to improve your app performance

A component re-renders when its state or props changes.
If a parent component re-renders, its child components also re-render regardless of whether there is a change in state/props or not.
This can cause performance issues, especially if the child components perform expensive calculations.
With the useMemo hook, you can cache the result of function. It takes a function as a first parameter and a dependency array as the second parameter. If the value of the elements in the dependency array do not change, as determined by Object.is comparison, React skips re-rendering the component.
The useCallback hook functions in the same way but only returns the definition of the function not the result of calling it.
Both hooks are used in memoizing React components/functions.
Here's a simple implementation of useMemo and useCallback hooks 👇

import React, { useState, useMemo, useCallback } from 'react';

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

  // Example of useMemo
  const doubledCount = useMemo(() => {
    console.log('Calculating doubled count...');
    return count * 2;
  }, [count]);

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Doubled Count: {doubledCount}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default App;

Conclusion

Improving your app performance can lead a richer experience for your users, in turn boosting your conversion and retention rates.
In this article, I have outlined five ways you can improve your React app performance. The techniques mentioned can also be applied to pretty much any framework.

Follow me on Twitter for more tips and tricks on React and JavaScript in general.