This error occurs when you create a React Suspense component without providing the required fallback prop. The fallback prop is mandatory for Suspense to work properly, as it specifies what UI to display while child components are loading or suspending.
This error indicates that a `<Suspense>` component has been created without the required `fallback` prop. In React, the Suspense component is designed to handle loading states for components that suspend during rendering, such as lazy-loaded components or components fetching data with Suspense-enabled libraries. The `fallback` prop is essential because it defines what UI should be displayed while the suspended component is loading. Without it, React doesn't know what to render during the loading period, resulting in this error. The fallback can be any valid React element, typically a loading spinner, skeleton screen, or placeholder text. This error commonly appears when using `React.lazy()` for code splitting, when components use Suspense-enabled data sources like React Query or SWR, or in Next.js applications where certain hooks like `useSearchParams()` require Suspense boundaries.
The simplest fix is to add a fallback prop with a loading UI:
import { Suspense } from 'react';
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}The fallback can be any valid React element. Common patterns include loading spinners, skeleton screens, or simple text.
Instead of plain text, provide a more polished loading experience:
import { Suspense } from 'react';
function LoadingSpinner() {
return (
<div className="spinner-container">
<div className="spinner" />
</div>
);
}
function App() {
return (
<Suspense fallback={<LoadingSpinner />}>
<LazyComponent />
</Suspense>
);
}For even better UX, use skeleton screens that mimic the layout of the content being loaded.
When using React.lazy(), always wrap the component in Suspense:
import { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading component...</div>}>
<LazyComponent />
</Suspense>
);
}You can wrap multiple lazy components with a single Suspense boundary, and they will all share the same fallback UI.
In Next.js, hooks like useSearchParams() require Suspense boundaries:
'use client';
import { Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
function SearchParamsComponent() {
const searchParams = useSearchParams();
return <div>{searchParams.get('query')}</div>;
}
export default function Page() {
return (
<Suspense fallback={<div>Loading search...</div>}>
<SearchParamsComponent />
</Suspense>
);
}This is required because these hooks can cause client-side rendering bailouts that need proper loading states.
When using nested Suspense components, ensure each one has a fallback:
function App() {
return (
<Suspense fallback={<div>Loading page...</div>}>
<Header />
<Suspense fallback={<div>Loading content...</div>}>
<Content />
</Suspense>
<Footer />
</Suspense>
);
}This creates granular loading states where different parts of your UI can load independently, providing better perceived performance.
Suspense-Enabled Data Sources: Suspense only works with Suspense-enabled data sources. You cannot use regular useEffect or event handlers to trigger Suspense. Libraries like React Query (with suspense: true), Relay, and SWR are Suspense-enabled and integrate properly with Suspense boundaries.
Error Boundaries: Suspense only handles loading (suspending) states, not errors. To handle errors in components that use Suspense, wrap your Suspense boundary with an Error Boundary component. This provides comprehensive error handling alongside loading states.
Optional Fallback in Some Cases: In React 18+, the semantics have evolved where a missing fallback prop can mean the suspension should propagate to the next parent Suspense boundary (similar to error rethrowing). However, this is an advanced pattern and typically you should always provide a fallback for clarity and user experience.
SSR Considerations: When using Suspense with Server-Side Rendering (SSR) in Next.js, be aware that fallbacks may not display for server components. Ensure that components you're suspending are client components (marked with 'use client') if you need the fallback to work properly.
Streaming with Suspense: In Next.js 13+ with the App Router, Suspense enables streaming SSR where parts of your page can be sent to the client as they become ready. The fallback is sent first, then replaced with the actual content when available, improving perceived performance.
Granular Loading States: Instead of wrapping your entire page in one Suspense boundary, use multiple boundaries around different sections. This prevents the "all-or-nothing" UI problem where the entire page vanishes when a single component suspends. Users will see partial content immediately while other sections load.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite