React lazy components

From wikinotes

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


React.lazy/Suspense docs
Transitions docs

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 />}>
        <MyComponent />