React.lazy reference

In a nutshell

The React.lazy function lets you defer loading a component’s code until it’s rendered for the first time.

import React, { Suspense } from 'react';

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

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

In the above example, assuming you’re using a bundler like Webpack, a separate bundle will be created that contains the OtherComponent.js file.

This bundle will only be imported on the page when OtherComponent is first rendered. Dynamically loading components like this helps reduce the size of the main bundle that’s initally loaded.

Use Suspense to provide a fallback content

Suspense takes a fallback prop that will render whilst the component within is being loaded.

Sources

• React.lazy – React docs
• React.Suspense – React docs