[Source: https://itnext.io/mastering-reactjs-optimization-d75b0af09a2f]

React is powerful and we love to use it, but sometimes, we struggle to deliver an optimized product.

As applications grow in complexity, however, it can become challenging to ensure optimal performance. In this blog post, we’ll explore some of the key techniques for optimizing React applications.

We’ll look at common performance bottlenecks and explore ways to overcome them using a range of strategies, including code splitting, lazy loading, memoization, profiler, and server-side rendering. By mastering these techniques, you’ll be able to create fast and responsive React applications that provide a great user experience.

Performance Bottlenecks

Before we dive into the specifics of optimization, it’s important to understand the key performance bottlenecks that can affect ReactJS applications. Some of the most common issues include:

1. Large bundle sizes: As your application grows, the size of the JavaScript bundle can increase significantly. This can lead to slower load times and a less responsive user interface.
2. Slow rendering: ReactJS uses a virtual DOM to manage updates to the user interface. If this process becomes slow, it can lead to a slow and unresponsive application.
3. Unoptimized network requests: If your application is making too many network requests or requesting too much data at once, it can slow down the user experience.

React Profiler

The React Profiler component also provides additional information, such as the component tree, the time taken to render each component, and the number of times each component was rendered. You can use this information to identify components that are taking longer to render than expected, or components that are being rendered more often than necessary.

To use the React Profiler, you can simply wrap the component you want to profile with the Profiler component and pass a callback function to the onRender prop. This function will be called whenever the component is rendered, and it will receive profiling data that you can use to analyze the performance of your application.

Here’s an example of how to use the React Profiler:

import React, { Profiler } from "react";
import MyComponent from "./MyComponent";

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  // Do something with the profiling data
}
function App() {
  return (
    <Profiler id="MyComponent" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

In this code, the Profiler component is used to wrap MyComponent, and a callback function is passed to the onRender prop to handle the profiling data. The callback function receives information about the component that was just rendered, including its id, phase, actualDuration, baseDuration, startTime, commitTime, and interactions.

The React browser extension also provides a Profiler tab that can be used for the same purposes.

By using the React Profiler, you can identify performance issues in your React application and make targeted optimizations to improve the user experience.

Code Splitting

Code splitting is a powerful optimization technique that can significantly improve the performance of your React application. It involves breaking up your code into smaller chunks, or “bundles”, which can be loaded on-demand as needed.

When you code split your application, you can reduce the initial load time of your application by only loading the minimum amount of code required to display the initial page. Additional code can then be loaded on-demand as the user interacts with the application.

There are several ways to code split your React application. One approach is to use the dynamic import() syntax, which allows you to load a module dynamically at runtime. Here’s an example:

import React, { useState } from "react";

function MyComponent() {
  const [isLoaded, setIsLoaded] = useState(false);
  
  async function loadComponent() {
    const { default: LazyComponent } = await import("./LazyComponent");
    setIsLoaded(true);
  }
  
  return (
    <div>
      <button onClick={loadComponent}>Load component</button>
      {isLoaded && <LazyComponent />}
    </div>
  );
}

In this code, we use the import() function to dynamically load a component called LazyComponent. When the user clicks the “Load component” button, the loadComponent function is called, which loads the component dynamically and updates the state to indicate that the component has been loaded.

Another approach to code splitting is to use the React.lazy() function, which allows you to load components lazily. Here’s an example:

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

const LazyComponent = lazy(() => import("./LazyComponent"));

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

In this code, we use the lazy() function to lazily load the LazyComponent component. The Suspense component is used to display a loading indicator while the component is being loaded.

Code splitting can help to reduce the initial load time of your application, and can also help to reduce the size of your application by only loading the code that is needed. By using code splitting, you can improve the performance and user experience of your React application.

Lazy loading

Another technique that can help reduce the size of your bundle is lazy loading. This involves loading modules only when they’re needed, rather than loading everything up front. React provides a convenient way to lazy load components using the React.lazy() function. Here’s an example:

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

const LazyComponent = lazy(() => import("./LazyComponent"));

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

In this code, we use the lazy() function to lazily load the LazyComponent component. The Suspense component is used to display a loading indicator while the component is being loaded.

Lazy loading can also be performed using import , similar to code splitting.

Lazy loading can help to reduce the initial load time of your application and improve its overall performance. By deferring the loading of non-critical resources until they are actually needed, you can ensure that your application loads quickly and is responsive to user interactions.

Server-Side Rendering

Another technique for optimizing React applications is server-side rendering (SSR). This involves rendering your React components on the server and sending HTML to the client, rather than sending JavaScript that needs to be executed in the browser. This can improve load times and provide a better user experience, particularly for users on slow or unreliable connections.

To implement SSR in a React application, you can use a library like Next.js or React-SSR. These libraries provide tools and APIs for rendering your React components on the server and sending the resulting HTML to the client.

Here’s an example of how to use Next.js to implement SSR in a React application:

// pages/index.js
import React from "react";

function Home() {
  return (
    <div>
      <h1>Welcome to my React application!</h1>
      <p>This page was rendered on the server using Next.js.</p>
    </div>
  );
}

export default Home;

In this code, we define a simple React component called Home, which displays a welcome message and some information about how the page was rendered. To render this component on the server using Next.js, we simply create a file called pages/index.js and export the Home component as the default export.

When the user requests the / route of our application, Next.js will render the Home component on the server and send the resulting HTML to the client. This can help to improve the initial load time and performance of our application.

SSR is a powerful technique for improving the performance and user experience of your React application. By pre-rendering the initial page on the server and sending it to the client, you can ensure that your application loads quickly and is responsive to user interactions.

Memoization

Memoization is a technique for optimizing the performance of a function by caching the results of its previous invocations. In React, memoization can be used to optimize the rendering of components that receive the same props and state multiple times.

In React, components are typically re-rendered whenever their props or state change. This can result in unnecessary re-renders if the component is receiving the same props and state values as before. Memoization can help to prevent these unnecessary re-renders by caching the result of the component’s previous rendering and reusing it if the props and state have not changed.

To use memoization in a React component, you can use the React.memo() function. This function is similar to the PureComponent class, but it works with functional components instead of class components.

Here’s an example:

import React from "react";

function MyComponent(props) {
  // expensive calculation
  const result = props.value1 + props.value2;

  return (
    <div>
      <p>Result: {result}</p>
    </div>
  );
}

export default React.memo(MyComponent);

In this code, we define a functional component called MyComponent, which performs an expensive calculation based on its props. We wrap the component with the React.memo() function to memoize the result of the component’s previous rendering.

If the props of the component have not changed since the last rendering, React will reuse the previously memoized result instead of re-rendering the component.

Memoization can be a powerful tool for optimizing the performance of React components that receive the same props and state multiple times. By caching the result of the component’s previous rendering and reusing it if the props and state have not changed, you can reduce the number of unnecessary re-renders and improve the overall performance of your application.

ShouldComponentUpdate

The shouldComponentUpdate() lifecycle method can be used to optimize React components by preventing unnecessary re-renders. By default, React will re-render a component whenever its props or state change. However, in some cases, you may know that a component doesn’t need to re-render, even if its props or state have changed. In these cases, you can implement shouldComponentUpdate() to return false. Here’s an example:

import React from "react";

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Only update if props.value has changed
    return nextProps.value !== this.props.value;
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

In this code, shouldComponentUpdate() is implemented to only update the component if props.value has changed. This can significantly improve the performance of the component by preventing unnecessary re-renders.

I hope that after reaching this point you have learned a bit more about optimization in React through these techniques. Happy coding!