Taming React.lazy(): Implementing a custom retry mechanism for dynamically loaded modules

React.lazy() is a feature of React that allows us to load components only when they are needed. By splitting our app into smaller chunks and loading them on demand, we can reduce the initial bundle size, speed up the loading process, and provide a better overall user experience. This technique is a part of React's best practices for performance optimization, as it leverages asynchronous loading to ensure the application remains fast and responsive.

In more detail, React.lazy() works by enabling code splitting, a method where the codebase is divided into multiple bundles that can be loaded independently. When a user navigates to a part of the app that requires a specific component, React.lazy() dynamically imports the element at that moment rather than loading it with the initial bundle. Such approach significantly improves the initial loading time of the application, which is crucial for maintaining high performance and a smooth user experience.

However, as with any powerful tool, there are some potential pitfalls when working with React.lazy(). One such challenge is handling errors related to fetching the dynamically imported modules. While React.lazy() is excellent for asynchronous loading and optimizing performance, network issues or server downtimes can cause these dynamically loaded modules to fail, leading to potential app crashes.

Sometimes, dynamically imported modules fail to load due to network issues, temporary server downtime, or a new deployment taking place. When this happens, users may experience app crashes, rendering the application unusable.

To address these issues, we need a robust solution that can handle errors gracefully and retry the module import process when necessary. This is where a custom retry mechanism comes into play.

The idea behind a custom retry mechanism is to create a wrapper function that handles retries in case of errors when importing modules with React.lazy(). This function should perform four main tasks:

1. Attempt to import the module using the provided import function.

2. Catch any errors that occur during the import process.

3. Retry the import process a specified number of times, with a delay between each attempt.

4. Perform a full-page reload if all retries fail, and store a flag in sessionStorage to prevent infinite reloading.

Here's the code for custom retry mechanism:

// utils/retryLazy.js
import React from "react";

const retryImport = (importFn, moduleName, retriesLeft = 3, delay = 1000) => {
  return new Promise((resolve, reject) =>
    importFn()
      .then(resolve)
      .catch((error) => {
        setTimeout(() => {
          console.log(`Retrying... Retries left: ${retriesLeft}`);
          if (retriesLeft === 1) {
            const reloadKey = `reload_${moduleName}`;
            const hasReloaded = sessionStorage.getItem(reloadKey);

            if (!hasReloaded) {
              sessionStorage.setItem(reloadKey, "true");
              window.location.reload();
            } else {
              sessionStorage.removeItem(reloadKey);
              reject(error);
            }
            return;
          }
          retryImport(importFn, moduleName, retriesLeft - 1, delay).then(
            resolve,
            reject
          );
        }, delay);
      })
  );
};

const retryLazy = (importFn, moduleName, retriesLeft = 3, delay = 1000) => {
  return React.lazy(() =>
    retryImport(importFn, moduleName, retriesLeft, delay)
  );
};

export default retryLazy;

To use this custom retry mechanism, simply wrap your dynamic imports with retryLazy() the same way as you would with the standard implementation of React.lazy():

// App.js
import React, { Suspense } from "react";
import retryLazy from "./utils/retryLazy";

const MyComponent = retryLazy(() => import("./MyComponent"), "MyComponent");

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

export default App;

With this implementation, the custom retry mechanism will handle errors during the import process and retry the import with a specified delay between each attempt. If all retries fail, it will perform a full-page reload, but only once per module, thanks to the sessionStorage flag.

After implementing the custom retry mechanism, we observed a significant improvement in our app's stability. The number of app crashes dropped by an astounding 92%, greatly enhancing the user experience and reducing the negative impact on users.

This custom retry mechanism demonstrates how a simple yet effective solution can help tackle the challenges of working with dynamically loaded modules in React. We can ensure a more resilient and robust application by handling errors gracefully and retrying the import process when necessary.

In summary, using React.lazy() to load modules dynamically can provide significant performance benefits, but handling errors effectively is essential to avoid app crashes. Implementing a custom retry mechanism can enhance our app's stability and provide a better user experience. Give it a try in your project!