React is a widely popular JavaScript library for building user interfaces. The combination of its declarative nature, JSX syntax, and virtual DOM makes it an excellent choice for writing UI code. However, building large-scale React applications that perform well can be challenging. As the complexity of your application grows, you may notice a decline in its performance, which can significantly impact user experience. Therefore, it's essential to optimize your React app's performance to ensure it's fast, responsive, and efficient.

In this article, we will explore the best optimization techniques you can use to make your React application run faster. We'll also discuss identifying performance bottlenecks, common pitfalls to avoid, and specific strategies to optimize your app's performance.

1. Use Browser Performance Tools

The most effective way to check your app's performance is through your web browser. There are several in-browser tools available that can give you accurate measurements and identify areas where your code may be slowing things down. One such tool is Lighthouse.

The Lighthouse extension is a great way to check the basic roadworthiness of your application. As well as checking performance, Lighthouse will look at the accessibility of your web page and whether you are following best practices for the web. It will check whether your pages are optimized for search engine robots and will look to see if your web application meets the standards required to consider it a progressive web application.

Figure: dev.to website performance checked by lighthouse

You can run a Lighthouse audit in two ways: either on the command line or in a browser. If you want to run audits on the command line, you will first need to install the Lighthouse command:

$ npm install -g lighthouse

You can then run an audit with the lighthouse command:

$ lighthouse http://localhost:3000

The command-line version of Lighthouse is simply an automated script for the Google Chrome browser. It has the advantage to generate an HTML report of the audit, which makes it suitable for use on a continuous integration server. You can also use Lighthouse interactively, within Google Chrome. It’s best to do this in an incognito window, as this will reduce the likelihood of other extensions and storage interfering with the Lighthouse audit. Once you have started Chrome and opened your application, go to developer tools and then switch to the Lighthouse tab.

Then click the Generate audit button. Lighthouse will refresh your page several times and perform a series of audits. The performance audit will concentrate on six different metrics. These metrics are known as web vitals. The web vitals are metrics that you can use to track performance when applications are running in production.

Now that we understand how to check the performance of our React app, let's delve into specific techniques that can help optimize its performance.

2. Use React.Suspense and React.Lazy for Lazy Loading Components

Lazy-loading components can significantly improve the performance of your React application by reducing the initial load time. The idea of lazy loading is to load a component only when it is needed. React comes bundled with React.Lazy and React.Suspense API so that you can render a dynamic import as a regular component. Here instead of loading your regular component like this:

import LazyComponent from './LazyComponent';

You can cut down the risk of performance by using the lazy method to render a component.

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

React.lazy takes a function that must call a dynamic import(). This will then return a Promise which resolves to a module with a default export containing a React component.

The lazy component should be rendered inside a Suspense component, which allows you to add fallback content as a loading state while waiting for the lazy component to load.

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
return (
<div>
  <Suspense fallback={<div>Loading....</div>}>
      <LazyComponent />
  </Suspense>
</div>
);
}

3. Memoising React Components with Memo

React.memo is a function that you can use to optimize the render performance of pure function components and hooks. It has been introduced in React v16.6..

Memo derives from memoization. It means that the result of the function wrapped in React.memo is saved in memory and returns the cached result if it’s being called with the same input again.

Now, let’s see how it works.

The basic usage looks like the following, you have to wrap your function component in a React.memo() function. This tends to look better with inline-style functions:

const Title = React.memo(() => {
let eventUpdates = React.useRef(0);
return (
<div className="black-tile">
      <Updates updates={eventUpdates.current++} />
</div>
);
});

This little change will help you improve the rendering performance of your components.

4. Tree-shaking

Tree-shaking is a technique used in modern JavaScript applications to eliminate unused code from the final bundle. In a large React application, there may be many components, functions, and other code that is not necessary for a particular page or feature. Tree-shaking enables you to remove this unused code, reducing the bundle size and improving the performance of your application.

Tree-shaking works by analyzing the dependencies of your code and removing any code that is not used or referenced. This is done by the bundler tool, such as Webpack, during the build process. When you import a module, the bundler will only include the parts of the code that are actually used in your application.

To ensure that your React application can take advantage of tree-shaking, you should use ES6 modules and ensure that your code is modular and follows best practices for organizing and importing/exporting code. Additionally, you should avoid importing entire libraries when you only need a small part of them.

5. Optimizing your images

Optimizing images is an important part of improving the performance of any application, including React applications. Large and unoptimized images can slow down your web applications and make it take longer to load. Here are some techniques you can use to optimize your images:

• Compress your images:Image compression reduces the size of your images without significantly affecting the quality. There are several image compression tools available, such as TinyPNG, JPEGmini, and Kraken.io, that can compress your images without losing quality.
• Use the appropriate image format: Different image formats are better suited for different types of images. For example, JPEG is better for photographs, while PNG is better for images with transparent backgrounds.
• Resize your images: Large images can slow down your website. Resizing your images to the appropriate size can reduce the size of your images and improve the performance of your web application.
• Lazy load your images: Lazy loading images means that images are loaded only when they are needed, such as when they appear on the user's screen. (We have addressed this particular technique in the second section of the article.)
• Use responsive images: Responsive images adapt to the size of the user's screen, which can improve the performance of your website on different devices. Use the srcset and sizes attributes to serve the appropriate image size for each device.

Summary

In this article, we have covered five approaches that can be used to improve the performance of React applications and reduce production bundle size. These can provide great improvements to a lot of users, especially those with a slower internet connection or lower-end devices that do not have as powerful CPUs.

THANK YOU FOR READING
I hope you found this article useful. Don't hesitate to share it with friends and colleagues – sharing is caring!

Connect with me on various platforms