React Suspense

React Suspense is a powerful feature introduced to help developers manage lazy loading components and handle asynchronous operations in the UI. It improves performance by loading only what’s needed and providing a smooth user experience.

Using Suspense, you can delay rendering parts of your UI until certain conditions are met, like fetching data or loading components.

What is React Suspense?

In a typical React application, all components render at once, which can lead to slower page load times, especially for large apps.

React Suspense allows you to:

• Load components lazily (only when needed).
• Display fallback content (like a loader) while components or data are being loaded.
• Simplify handling asynchronous UI with a declarative approach.

Key Features of React Suspense

1. Lazy Loading Components – Load components only when required.
2. Fallback UI – Show placeholders, spinners, or loaders while content is loading.
3. Async Rendering Support – Integrates well with concurrent features and data fetching.

Lazy Loading Components with React.lazy

React provides the React.lazy() function to dynamically import components.

Syntax:

const Component = React.lazy(() => import('./Component'));

• React.lazy() takes a function that returns a dynamic import.
• The component is loaded only when it’s rendered, reducing the initial bundle size.

Example: Lazy Loading a Component

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

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

export default App;

• <Suspense> wraps the lazy-loaded component.
• fallback defines the UI shown while the component is loading.
• Once the component finishes loading, the fallback is replaced by the actual component.

Multiple Lazy Components

You can wrap multiple lazy components in a single Suspense:

<Suspense fallback={<div>Loading components...</div>}>
  <LazyHeader />
  <LazyContent />
  <LazyFooter />
</Suspense>

• All lazy components inside the Suspense show the same fallback while loading.
• This reduces flicker and provides a smoother experience.

Suspense with Data Fetching

React 18 introduced support for asynchronous data fetching with Suspense, especially with libraries like React Query or Relay.

Example using a mock async component:

import React, { Suspense } from "react";

const AsyncComponent = React.lazy(() =>
  new Promise(resolve => {
    setTimeout(() => resolve(import("./AsyncComponent")), 3000);
  })
);

function App() {
  return (
    <div>
      <h1>Async Component with Suspense</h1>
      <Suspense fallback={<div>Loading async content...</div>}>
        <AsyncComponent />
      </Suspense>
    </div>
  );
}

export default App;

• setTimeout simulates a network delay.
• The fallback UI appears until the component finishes loading.

Advantages of Using React Suspense

• Performance Optimization – Reduces initial bundle size and speeds up loading.
• Better UX – Displays loading states while content is fetched.
• Scalable Code – Easier to split and manage large React applications.
• Seamless Async Handling – Works naturally with concurrent React features.