Loading lesson path
React Suspense lets you display an alternative HTML while waiting for code or data to load. The alternative HTML can be a component, text, or any valid content.
Suspense is a React feature that lets your components display an alternative HTML while waiting for code or data to load. The most common use cases are:
React.lazy()
If a component takes time to load, you can use a Suspense component, and it will display the fallback content while the component is loading.
Fruits component takes two seconds to load, so we wrap it in a Suspense component to display a loading message while it is loading.
import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Fruits from './Fruits';function App() {
return (<div>
<Suspense fallback={<div>Loading...</div>}><Fruits /> </Suspense> </div>
);
}createRoot(document.getElementById('root')).render( <App />
);Suspense component is when importing components with lazy loading: In the example above we had to fake a delay of two seconds to see the loading message. A task like displaying three fruits from an array would be too fast to see the loading message at all. But with lazy loading, we can import a component dynamically, and it will display a loading message while it is loading, even if the task is very fast. Lets first create an example WITHOUT using lazy loading, where we do not fake a two seconds delay:
This example is too fast to see the loading message:
import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Cars from './Cars';function App() {
return (<div>
<Suspense fallback={<div>Loading...</div>}><Cars /> </Suspense> </div>
);
}createRoot(document.getElementById('root')).render( <App />
);Now let us create an example WITH using lazy loading:
Same example as above, but using lazy loading:
import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';const Cars = lazy(() => import('./Cars'));function App() {
return (<div>
<Suspense fallback={<div>Loading...</div>}><Cars /> </Suspense> </div>
);
}createRoot(document.getElementById('root')).render( <App />
);lets you load a component dynamically Suspense shows a fallback while the component loads
One Suspense component can wrap multiple lazy components:
Example import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';const Header = lazy(() => import('./Header'));
const Content = lazy(() => import('./Content'));
const Sidebar = lazy(() => import('./Sidebar'));function App() {
return (<div>
<Suspense fallback={<div>Loading...</div>}><Header />
<div style=><Sidebar /> <Content /> </div> </Suspense> </div>
);
}createRoot(document.getElementById('root')).render( <App />
);