Using the Suspense component

In this section, we'll explore some of the more common usage scenarios of the Suspense component. We'll look at where to place Suspense components in your component tree, how to simulate latency when fetching bundles, and some of the options available to us to use as the fallback content.

Top-level Suspense components

Lazy components need to be rendered inside of a Suspense component. However, they do not have to be direct children of Suspense though, which is important because this means that you can have one Suspense component handle every lazy component in your app. Let's illustrate this concept with an example. Here's a component that we would like to bundle separately and use lazily:

export default function MyFeature() {
  return <p>My Feature</p>;
}

Next, let's make the MyFeature component lazy and render it inside of a MyPage component:

const MyFeature = React.lazy(() => import("...