How to Use Suspense in React: Simple Guide with Examples

Use Suspense in React by wrapping lazy-loaded components or asynchronous data fetching components inside it and providing a fallback UI to show while loading. This lets React display a loading indicator until the content is ready.

Syntax

The Suspense component wraps parts of your UI that may load asynchronously. It requires a fallback prop, which is the UI shown while waiting.

Inside Suspense, you typically place components loaded with React.lazy() or components that use data fetching libraries supporting Suspense.

jsx

import React, { Suspense, lazy } from 'react';

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

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

export default App;

Example

This example shows how to use Suspense with a lazy-loaded component. While the component loads, the fallback text "Loading..." is displayed.

jsx

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

const LazyMessage = lazy(() => new Promise(resolve => {
  setTimeout(() => {
    resolve({ default: () => <h1>Hello from Lazy Component!</h1> });
  }, 2000);
}));

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

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

Output

Loading... (for 2 seconds), then displays: Hello from Lazy Component!

Common Pitfalls

• Not wrapping lazy components inside Suspense causes errors because React doesn't know what to show while loading.
• Using Suspense without a fallback prop will cause a runtime error.
• Trying to use Suspense for data fetching without compatible libraries or setup will not work as expected.

jsx

/* Wrong: Lazy component without Suspense */
import React, { lazy } from 'react';

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

function App() {
  return <LazyComp />; // Error: No Suspense fallback
}

/* Right: Wrap with Suspense and fallback */
import React, { Suspense, lazy } from 'react';

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

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

export default App;

Quick Reference

• Suspense: Wraps lazy or async components to show fallback UI.
• fallback: Required prop; UI shown while loading.
• React.lazy(): Used to load components lazily.
• Works only with components that support Suspense (lazy or compatible data fetching).

Key Takeaways

Always wrap lazy-loaded components inside Suspense with a fallback UI.

fallback prop defines what users see while content loads.

Suspense works best with React.lazy() and compatible async data fetching.

Not using Suspense correctly causes runtime errors.

Use Suspense to improve user experience by showing loading states smoothly.