How to use Suspense in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
React Suspense provides a powerful way to handle loading states for asynchronous operations like lazy component loading and data fetching.
As the creator of CoreUI, a widely used open-source UI library, I’ve used Suspense extensively in React applications to create smooth user experiences.
From my 25 years of experience in web development and 11 years with React, the most effective approach is to wrap components that might suspend with a Suspense boundary and provide appropriate fallback UI.
This pattern creates declarative loading states and better error handling.
Wrap components that might suspend with Suspense and provide a fallback UI for loading states.
import { Suspense, lazy } from 'react'
const LazyComponent = lazy(() => import('./LazyComponent'))
function App() {
return (
<Suspense fallback={<div>Loading component...</div>}>
<LazyComponent />
</Suspense>
)
}
// Multiple Suspense boundaries for granular loading
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Suspense fallback={<div>Loading charts...</div>}>
<Charts />
</Suspense>
<Suspense fallback={<div>Loading table...</div>}>
<DataTable />
</Suspense>
</div>
)
}
The Suspense component catches any component that “suspends” (throws a promise) and displays the fallback UI until the promise resolves. The fallback prop accepts any React element, from simple text to complex loading components. You can create multiple Suspense boundaries to handle different loading states independently. When the suspended component loads successfully, React automatically replaces the fallback with the actual component.
This is the same Suspense pattern we use in CoreUI React templates to create seamless loading experiences in admin dashboards. For data fetching, combine Suspense with libraries like React Query or SWR that support Suspense mode for automatic loading state management.
