5 Ways To Optimize Your React App Performance 2023
Tags: react, webdev, javascript, webperf
Published: 2023-06-03 10:00:41

_<a href="https://www.freepik.com/free-vector/rocket-flying-space-cartoon-vector-icon-illustration-science-technology-icon-concept-isolated_39010860.htm#query=Cartoon%20rocket&position=3&from_view=search&track=ais">Image by catalyststuff</a> 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.

```javascript
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 👇

```javascript
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.