lets you display a fallback until its children have finished
loading.

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

  * Reference 
    * ` <Suspense> `
  * Usage 
    * Displaying a fallback while content is loading 
    * Revealing content together at once 
    * Revealing nested content as it loads 
    * Showing stale content while fresh content is loading 
    * Preventing already revealed content from hiding 
    * Indicating that a Transition is happening 
    * Resetting Suspense boundaries on navigation 
    * Providing a fallback for server errors and client-only content 
  * Troubleshooting 
    * How do I prevent the UI from being replaced by a fallback during an update? 

* * *

##  Reference

###  ` <Suspense> `

####  Props

  * ` children ` : The actual UI you intend to render. If ` children ` suspends while rendering, the Suspense boundary will switch to rendering ` fallback ` . 
  * ` fallback ` : An alternate UI to render in place of the actual UI if it has not finished loading. Any valid React node is accepted, though in practice, a fallback is a lightweight placeholder view, such as a loading spinner or skeleton. Suspense will automatically switch to ` fallback ` when ` children ` suspends, and back to ` children ` when the data is ready. If ` fallback ` suspends while rendering, it will activate the closest parent Suspense boundary. 

####  Caveats

  * React does not preserve any state for renders that got suspended before they were able to mount for the first time. When the component has loaded, React will retry rendering the suspended tree from scratch. 
  * If Suspense was displaying content for the tree, but then it suspended again, the ` fallback ` will be shown again unless the update causing it was caused by [ ` startTransition ` ](/reference/react/startTransition) or [ ` useDeferredValue ` ](/reference/react/useDeferredValue) . 
  * If React needs to hide the already visible content because it suspended again, it will clean up [ layout Effects ](/reference/react/useLayoutEffect) in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don’t try to do this while the content is hidden. 
  * React includes under-the-hood optimizations like _Streaming Server Rendering_ and _Selective Hydration_ that are integrated with Suspense. Read [ an architectural overview ](https://github.com/reactwg/react-18/discussions/37) and watch [ a technical talk ](https://www.youtube.com/watch?v=pj5N-Khihgc) to learn more. 

* * *

##  Usage

###  Displaying a fallback while content is loading

You can wrap any part of your application with a Suspense boundary:

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

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

In the example below, the ` Albums ` component _suspends_ while fetching the
list of albums. Until it’s ready to render, React switches the closest
Suspense boundary above to show the fallback—your ` Loading ` component. Then,
when the data loads, React hides the ` Loading ` fallback and renders the `
Albums ` component with data.

ArtistPage.js

ArtistPage.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { Suspense } from 'react';
    import Albums from './Albums.js';
    
    export default function ArtistPage({ artist }) {
      return (
        <>
          <h1>{artist.name}</h1>
          <Suspense fallback={<Loading />}>
            <Albums artistId={artist.id} />
          </Suspense>
        </>
      );
    }
    
    function Loading() {
      return <h2>🌀 Loading...</h2>;
    }
    
    

Show more

###  Note

**Only Suspense-enabled data sources will activate the Sus