React Suspense

React Suspense lets you display an alternative HTML while waiting for code or data to load.

The alternative HTML can be a component, text, or any valid content.

What is Suspense?

Suspense is a React feature that lets your components display an alternative HTML while waiting for code or data to load.

The most common use cases are:

• Data fetching with suspense-enabled frameworks
• Loading components dynamically with React.lazy()

Using Suspense

If a component takes time to load, you can use a Suspense component, and it will display the fallback content while the component is loading.

Example

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Fruits from './Fruits';

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

createRoot(document.getElementById('root')).render(
  <App />
);

Using Suspense with lazy Loading

Another common use of the Suspense component is when importing components with lazy loading:

In the example above we had to fake a delay of two seconds to see the loading message. A task like displaying three fruits from an array would be too fast to see the loading message at all.

But with lazy loading, we can import a component dynamically, and it will display a loading message while it is loading, even if the task is very fast.

Lets first create an example WITHOUT using lazy loading, where we do not fake a two seconds delay:

Example

import { createRoot } from 'react-dom/client';
import { Suspense } from 'react';
import Cars from './Cars';

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

createRoot(document.getElementById('root')).render(
  <App />
);

Now let us create an example WITH using lazy loading:

Example

import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';

const Cars = lazy(() => import('./Cars'));

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

createRoot(document.getElementById('root')).render(
  <App />
);

Example Explained

• lazy() lets you load a component dynamically
• Suspense shows a fallback while the component loads

Multiple Components

One Suspense component can wrap multiple lazy components:

Example

import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';

const Header = lazy(() => import('./Header'));
const Content = lazy(() => import('./Content'));
const Sidebar = lazy(() => import('./Sidebar'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Header />
        <div style={{ display: 'flex' }}>
          <Sidebar />
          <Content />
        </div>
      </Suspense>
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <App />
);