Using Suspense for Data Fetching in React (2020 Update)

Published on 22.3.2020

React has introduced a powerful feature to make handling asynchronous data much easier: Suspense. While it initially started out as a way to simplify code splitting with React.lazy, it’s now evolving to handle data fetching in a way that could revolutionize how we build applications. In this post, we’ll take a look at how Suspense makes async rendering easier, how it integrates with React.lazy() for code-splitting, and the exciting future of data fetching in React.

What is React Suspense?

React Suspense is a mechanism that helps you handle asynchronous operations—like fetching data, loading components, or any other operations that take time—without having to worry about complex loading states. It lets you pause rendering while waiting for async tasks to complete, and then “resume” rendering once the data or component is ready.

In short, Suspense gives you a simple way to work with async data without manually managing loading, error, and success states. It’s the declarative way to deal with these common tasks, allowing React to handle the heavy lifting under the hood.

How Does Suspense Make Async Rendering Easier?

Before Suspense, developers had to manage async operations manually, which often involved using state and effect hooks to track loading and error states. For example, fetching data from an API usually required a loading spinner, followed by a success state when the data was received, or an error state if the fetch failed.

With Suspense, React handles all of this for you. Here’s how:

Automatic Error Boundaries: With Suspense, you no longer need to wrap individual components in error boundaries to handle loading or error states. React automatically handles any async failures and can be configured to show a fallback UI while waiting for the data or component to load.
Declarative Async Management: Instead of writing imperative code to track loading states, you can declare that a component or a part of the app is dependent on async data. Suspense will automatically wait for the data to resolve before rendering the component.
Pausing Rendering: When Suspense encounters a component that needs data or a chunk of code that isn’t available yet, it will pause the rendering process until everything is ready. While the component is loading, React shows a fallback UI—such as a loading spinner—until the data or code is fetched and the component can resume rendering.

Integrating Suspense with React.lazy and Code-Splitting

One of the most powerful aspects of Suspense is how it integrates with React.lazy() to handle code-splitting.

What is Code-Splitting?

Code-splitting is a technique where your JavaScript bundle is split into smaller, more manageable chunks, which allows the browser to load only the code necessary for the current page or view. This improves the performance of your app, especially for larger applications with many components.

With React.lazy(), you can dynamically load components as they’re needed instead of loading everything upfront. Suspense lets you manage the waiting process when React is loading those chunks asynchronously.

How Does it Work?

Here’s a quick example of using React.lazy() and Suspense to load a component asynchronously:

import React, { Suspense } from 'react';

// Lazy-load the component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>My React App with Suspense</h1>

      {/* Wrap the lazy component in Suspense */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

In the example above:

React.lazy() is used to dynamically import the LazyComponent only when it’s needed.
Suspense is used to wrap the LazyComponent, providing a fallback UI (like a loading spinner) while the component is being fetched.

The Future of Data Fetching in React

As of 2020, Suspense is evolving to handle data fetching. Previously, data fetching in React often involved useEffect and state management hooks, but with Suspense for Data Fetching, React will soon be able to handle asynchronous data loading in a much cleaner, declarative way.

What’s Changing?

Built-in Support for Async Data: React is moving towards providing a standardized API for fetching data, removing the need for external libraries like Redux or React Query for simple data-fetching use cases. With Suspense, React will manage data-fetching states internally, reducing boilerplate code.
Concurrent Rendering for Data: With Concurrent Mode (which Suspense is closely tied to), React can pause and resume rendering while fetching data asynchronously. This allows for more fluid, interactive UIs without blocking the app while waiting for data. For example, if data is being fetched in the background, the app can remain interactive until the data is available.
React Suspense for Server-Side Data: React has started experimenting with server-side data fetching using Suspense. This means you can fetch data on the server side while keeping your app’s user interface in sync with the client. Server-Side Suspense could improve initial load performance by fetching data before rendering components on the client.

How to Use Suspense for Data Fetching (Example)

Here’s a quick example of how you can use Suspense for Data Fetching. As of now, React is still in the process of fully implementing Suspense for data, so you might need to use experimental APIs.

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

// Simulate fetching data
function fetchData(url) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ message: 'Data fetched successfully!' });
    }, 2000);
  });
}

// Create a resource to handle the fetching process
function createResource(promise) {
  let status = 'pending';
  let result;
  let error;

  const suspender = promise
    .then(
      (res) => {
        status = 'success';
        result = res;
      },
      (err) => {
        status = 'error';
        error = err;
      }
    );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw error;
      } else {
        return result;
      }
    },
  };
}

// Wrap the data-fetching function with Suspense
const resource = createResource(fetchData('https://api.example.com/data'));

function DataFetchingComponent() {
  const data = resource.read(); // Waits for the data to resolve

  return <div>{data.message}</div>;
}

function App() {
  return (
    <div>
      <h1>Suspense for Data Fetching Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <DataFetchingComponent />
      </Suspense>
    </div>
  );
}

export default App;

In this example:

The fetchData function simulates fetching data asynchronously.
The createResource function creates a resource for the async operation, and the read() method will throw the promise until it resolves.
The Suspense component wraps the DataFetchingComponent and shows a fallback loading UI while the data is being fetched.

Why Should You Care About Suspense for Data Fetching?

Declarative Data Management: Suspense makes it easier to manage async data in a declarative way without the need for manual loading/error handling. React will take care of showing the appropriate UI while your data is being fetched.
Cleaner Code: With Suspense, you can simplify your components, especially when dealing with async data. No more nested loading spinners or complex state management.
Better User Experience: By pausing and resuming rendering with Concurrent Mode, Suspense ensures that your app remains responsive and provides a smoother experience for users.
Future-Proofing Your App: React Suspense for Data Fetching is set to become the standard way of managing async data. By adopting it now, you’ll future-proof your app and make it easier to integrate with future React features.

Conclusion

Suspense is transforming how we handle async rendering in React. By combining React.lazy() with Suspense, React makes code-splitting easy, and it’s now expanding to handle data fetching in a way that reduces boilerplate and simplifies the developer experience.

As React’s ecosystem evolves, Suspense will become a foundational tool for building faster, more efficient apps, with better performance and user experience. If you haven’t started exploring Suspense for your own projects, now is the time to dive in and prepare for the future of React development.

Let me know if you have any questions about Suspense or its integration with data fetching!