React lazy components

Lazy component imports let you postpone an import,
and render a 'suspense' component in it's place until it has loaded.

Lazy Component Imports

A component import can be wrapped in a React.lazy(), which delays the component from loading until it is called.
While it is loading, the nearest parent React.Suspense component will be rendered in it's place (ex. loading-bar, spinner).

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

function RootComponent() {
  return (
    <React.Suspense fallback={<Spinner />}>
      <div>
        <MyComponent />
      </div>
    </React.Suspense>
  )
}