Suspense

React Suspense is a powerful feature that helps manage loading states in your application, making it easier to handle asynchronous operations and provide a better user experience. Introduced in React 16.6, Suspense has evolved over time, and with React 19, it’s more powerful than ever. This guide will walk you through the basics and advanced patterns of using Suspense in your React applications.

Basic Example

To get started with Suspense, you need to wrap your component tree with a Suspense component and specify a fallback UI. Here’s a simple example:

import React, { Suspense } from 'react';
 
const ProfilePage = React.lazy(() => import('./ProfilePage'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProfilePage />
    </Suspense>
  );
}

In this example, the ProfilePage component is loaded lazily using React.lazy, and the Suspense component is used to display a loading message until the component is loaded.

Advanced Usage

You can also use Suspense to handle loading states for nested components. For instance, you can create a separate Suspense boundary for a specific component:

import React, { Suspense } from 'react';
 
const ProfileData = React.lazy(() => import('./ProfileData'));
const ProfilePicture = React.lazy(() => import('./ProfilePicture'));
 
function ProfilePage() {
  return (
    <div>
      <Suspense fallback={<div>Loading profile data...</div>}>
        <ProfileData />
      </Suspense>
      <Suspense fallback={<div>Loading profile picture...</div>}>
        <ProfilePicture />
      </Suspense>
    </div>
  );
}

This way, you can handle loading states for individual components separately.

Error Handling

You can also use ErrorBoundary to catch and handle errors that occur during the loading process:

import React, { Suspense, useState, useEffect } from 'react';
 
const ProfilePage = React.lazy(() => import('./ProfilePage'));
 
function App() {
  const [error, setError] = useState(null);
 
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ErrorBoundary onError={(error) => setError(error)}>
        <ProfilePage />
      </ErrorBoundary>
    </Suspense>
  );
}
 
function ErrorBoundary({ children, onError }) {
  return (
    <React.Fragment>
      {children}
      {error && <div>Error: {error.message}</div>}
    </React.Fragment>
  );
}

Best Practices

• Use React.lazy to load components lazily and improve performance.
• Create separate Suspense boundaries for individual components to handle loading states separately.
• Use ErrorBoundary to catch and handle errors that occur during the loading process.
• Keep your fallback UI simple and informative to provide a good user experience.

Key Takeaways

• Use Suspense to manage loading states in your React applications.
• Create separate Suspense boundaries for individual components to handle loading states separately.
• Use ErrorBoundary to catch and handle errors that occur during the loading process.
• Always keep your fallback UI simple and informative to provide a good user experience.