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.
Documentation
React.lazy/Suspense docs https://reactjs.org/docs/react-api.html#reactlazy
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 parentReact.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> ) }