Lazy Loading in ReactJs (With React.lazy and Suspense)

Photo by Yura Fresh on Unsplash

Introduction

Usually, when working with medium or large projects, we tend to break it into reusable modules, components, and utility functions to build larger pieces of our application. Each file has some dependency, we end up with all the files in the project being linked.
Bundling is the process of resolving the web dependencies and merging or packaging the files/modules into one optimized javascript file called the bundle using some tools like Webpack or Browsify.

What’s and Why Lazy Loading?

But what happens when the application grows dramatically? The bundler will bundle all of your files into one big chunk. That may and will affect the duration in which the application loads in the browser for the app customer to use, and may hurt the User Experience (UX)badly.

Luckily, we do have a way to split our generated file into multiple small chunks that can be dynamically loaded at runtime (That’s why it’s called Lazy Loading 😉).

Implementation

React.lazy is a function that lets you render a dynamic import as a regular component. It takes an anonymous function as an argument that must call a dynamic import().
It only supports default exports. If the module you’re trying to import is using named components, you can create an intermediate component that reexports it as the default.

• Normal import:

import MyComponent from './MyComponent';

• Dynamic import:

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

The lazy components must be rendered inside a Suspence component, which takes the lazy components as children, and allows you to implement a fallback component (such as a loader) that will be rendered while the user is waiting for the component to load.

import React, { Suspense } from 'react';

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

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

To manage errors, we can wrap the Suspense component with an ErrorBoundaries component.

Route-based code splitting

Deciding where to introduce code splitting in your app can be a bit tricky. You want to make sure you choose places that will split bundles evenly but won’t disrupt the user experience.

One approach to code-splitting React components is called route-based code-splitting, which requires applying dynamic import() to lazy load route components.

Let’s take a look at a code example of how to set up route-based code splitting into your app using libraries like React Router with React lazy().

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

Thanks for reading! And of course, share your opinion with us.