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.
Top comments (6)
Good article 👍
I will add also is good to use React Profiler to measure the performance.
Resources: react.dev/reference/react/Profiler
Thanks for the addition.
React Profiler is a good tool for measuring performance.
Comprehensive article on improving app performance. 👏
Thank you Bryan
Great Article
Glad you found it helpful