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.
What is Suspense?
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
- Data fetching with suspense-enabled frameworks
- Loading components dynamically with React.lazy()
Using Suspense
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.
Example
The 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 /> );Using Suspense with lazy Loading
Another common use of the 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:
Example
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:
Example
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 /> );Example Explained
- lazy() lets you load a component dynamically
- Suspense shows a fallback while the component loads
Multiple Components
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={{ display: 'flex' }}> <Sidebar /> <Content /> </div> </Suspense> </div> );
}
createRoot(document.getElementById('root')).render( <App /> );