React Suspense

Suspense

<Suspense> allows you to handle asynchronous rendering by displaying a fallback UI while waiting for content to load. It is commonly used with lazy-loaded components and data fetching.

It has two main props:

1. fallback (Required): Defines the UI to show while the children are loading.
2. children (Required): The components that might suspend (i.e., take time to load).

<Suspense fallback={<Loading />}>
  <Albums />
</Suspense>

React will display your loading fallback until all the code and data needed by the children has been loaded.

Usecases

1. Suspense with Lazy-Loaded Components: React allows lazy loading components Using React.lazy() to reduce the initial bundle size.

   import React, { Suspense, lazy } from "react";
   
   const LazyComponent = lazy(() => import("./LazyComponent"));
   
   function App() {
     return (
       <Suspense fallback={<div>Loading component...</div>}>
         <LazyComponent />
       </Suspense>
     );
   }
   
   export default App;

2. Suspense for Data Fetching with fallback: use() hook to fetch data and handle loading with <Suspense>. If you fetch data inside useEffect or an event handler, Suspense won't work.

   import { Suspense, use } from "react";
   
   function DataComponent() {
   const albums = use(fetchData(`/albums-api-url-here}`)); // 🔹 Suspense will handle this Promise
   return (
       <ul>
       {albums.map((album) => (
           <li key={album.id}>
           {album.title} ({album.year})
           </li>
       ))}
       </ul>
   );
   }
   
   export default function App() {
   return (
       <Suspense fallback={<div>Loading data...</div>}>
       <DataComponent />
       </Suspense>
   );
   }

---

Nesting Suspense in React

You can nest multiple <Suspense> components to handle different parts of your UI independently. This improves user experience by allowing some parts to load earlier while others continue fetching data.

export default function App() {
  return (
    <Suspense fallback={<div>🔄 Loading User & Posts...</div>}>
      <UserComponent /> {/* Loads in 2s */}
      <Suspense fallback={<div>🔄 Loading Posts...</div>}>
        <PostsComponent /> {/* Loads in 4s */}
      </Suspense>
    </Suspense>
  );
}

The above example works as below,

1. The outer <Suspense> shows "Loading User & Posts..." initially.
2. After 2 seconds, UserComponent loads (Name appears), but PostsComponent is still loading.
3. The inner <Suspense> switches from "Loading Posts..." to show posts after 4 seconds.