Q197: What is suspense component? - React & Modern Frontend (445 Qs)

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:

Code splitting with React.lazy()

javascript

 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.

Data fetching that can suspend

jsx

 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>
   );
 }

Nested Suspense for progressive loading

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

jsx

 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.