What is suspense component?

React Suspense is a built-in feature that lets you delay rendering part of the UI until asynchronous work (such as loading a component or fetching data) is ready. While waiting, React shows a fallback UI (loading text, skeleton, spinner, etc.) defined by the nearest <Suspense> boundary.

Common use cases:

1. Code splitting with React.lazy()

        import { Suspense, lazy } from "react";

        const OtherComponent = lazy(() => import("./OtherComponent"));

        function MyComponent() {
          return (
            <Suspense fallback={<div>Loading component...</div>}>
              <OtherComponent />
            </Suspense>
          );
        }
        

The fallback is shown until OtherComponent is downloaded and rendered.

1. Data fetching that can suspend

        import { Suspense, use } from "react";

        function UserProfile() {
          const user = use(fetchUser()); // suspends until promise resolves
          return <div>{user.name}</div>;
        }

        function App() {
          return (
            <Suspense fallback={<div>Loading user...</div>}>
              <UserProfile />
            </Suspense>
          );
        }
        

1. Nested Suspense for progressive loading

Nested boundaries let important content render first while slower sections keep loading.

        import { Suspense, lazy } from "react";

        const ProductDetails = lazy(() => import("./ProductDetails"));
        const ProductReviews = lazy(() => import("./ProductReviews"));

        function ProductPage() {
          return (
            <Suspense fallback={<PageSkeleton />}>
              <ProductDetails />

              <Suspense fallback={<ReviewsSkeleton />}>
                <ProductReviews />
              </Suspense>
            </Suspense>
          );
        }
        

Here, ProductDetails can appear first, and ProductReviews can continue loading with its own fallback.

Tip: Keep Suspense boundaries close to slow UI regions so users see meaningful content sooner.