React › Code Splitting & Lazy Loading

What happens if a lazy loaded component is not wrapped inside a Suspense component?

Beginner

Answer

React needs a Suspense boundary somewhere above a lazy loaded component to know what to show while that component's code is still downloading. If there is no Suspense wrapper anywhere in the parent tree, React will throw an error when it tries to render the lazy component.

// This will cause an error because there is no Suspense boundary
const Profile = React.lazy(() => import('./Profile'));

function App() {
  return <Profile />; // missing Suspense wrapper
}

Real-world example A developer forgets to add a Suspense wrapper around a newly lazy loaded settings page, and the app crashes with a clear error message reminding them exactly what is missing.

Common follow-ups: Can one Suspense component wrap multiple lazy loaded components at once?;What fallback content usually works best for a real production app?

Suspense & Concurrent Rendering;Error Boundaries