What Is React Suspense and How Does Lazy Loading Work?

What Is React Suspense and How Does Lazy Loading Work?

Suspense is React's declarative way to handle loading states, especially for lazy-loaded components. Here is what it is and how lazy loading works.

What Suspense Is

Suspense is a component that lets you show a fallback while a child is not ready, like while code is loading or data is being fetched. It makes loading states declarative instead of manual.

Lazy Loading With React.lazy

React.lazy lets you render a component imported dynamically, so its code is loaded only when needed. You wrap the lazy component in a Suspense with a fallback, and the fallback shows while the code loads.

Why Lazy Loading Matters

Without it, your entire app ships in one bundle, slowing the first load. Lazy loading splits routes so users only download the code for the page they are on, which improves initial load significantly.

How Suspense Works

When a lazy component is requested, React pauses rendering it, shows the Suspense fallback, and resumes once the code is loaded. The user sees a spinner instead of a blank screen.

Data Fetching and Suspense

Suspense is also being extended to data fetching, where components suspend while waiting for data and a Suspense boundary shows the fallback. This is part of React's concurrent features.

Where to Place Suspense

Place Suspense boundaries around lazy-loaded routes, and around sections that load independently. You can nest them, with the nearest boundary catching the suspension.

The Takeaway

Suspense lets you show a fallback while a child is not ready, and React.lazy uses it for lazy loading. Lazy loading splits your bundle so users only load the code they need, improving the first load.