Handle data fetching with Suspense in React

GitHub link for the code below: https://github.com/prakash118/react-suspense

Suspense is a built-in component in React that lets you pause (suspend) the rendering of a component until an asynchronous operation completes. Using Suspense in React significantly improves both the user experience and the developer experience when dealing with asynchronous operations like data fetching and code splitting. It also provides a way to display a fallback UI; e.g. a loading spinner while waiting for the operation to finish.

To illustrate the difference, we'll compare data loading with and without Suspense in a Next.js context. Next.js is a widely used and stable React framework with robust support for Suspense in both client-side and server-side rendering. The code snippets below is available in my GitHub page.

The User type, as defined below, will be used in all subsequent code examples.

interface User {
    id: number;
    fullname: string;
}

The common/usual approach

common.tsx

export default function Users() {
  const [users, setUsers] = useState<User[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(false);

  useEffect(() => {
    const getAllUsers = async () => {
      try {
        const response = await fetch('/api/users');
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        setError(true);
      } finally {
        setIsLoading(false);
      }
    };
    getAllUsers();
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error</div>;
  }

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>Name: {user.fullname}</li>
      ))}
    </ul>
  );
};

This common implementation uses three states to handle data fetching, which occurs only once when the component mounts due to the empty dependency array in the useEffect hook. A loading message is shown while data is being fetched, an error message if the fetch fails, and the user list is rendered upon successful completion.

Although combining the states into a single state and including an error message to the state is possible. An even better option is to use the useReducer hook that offers a more robust solution for complex state management. However, the fundamental need for manual state updates within the getAllUsers function remains.

Let's explore how Suspense simplifies this component.

The Suspense approach

suspense.tsx

function UserList({ usersPromise }: { usersPromise: Promise<User[]> }) {
  const users = use(usersPromise);
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>Name: {user.fullname}</li>
      ))}
    </ul>
  );
};

export default function UserListContainer() {
  const getAllUsers = async () => {
    const res = await fetch('/api/users');
    return await res.json();
  };

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserList usersPromise={getAllUsers()} />
    </Suspense>
  );
};

It's immediately clear that this approach eliminates the need for useState and useEffect hooks, resulting in significantly less code. However, utilizing Suspense necessitates the creation of an additional wrapper component, as you can see in the code above.

Here, a getAllUsers function returns a promise that is then passed down as props to the UserList component. Within the UserList component, the use hook is responsible for pausing rendering until the promise resolves. While rendering is suspended, the fallback component provided in the Suspense component, in this case, the loading text is displayed.

The use hook is essential for client-side rendering. With that established, let's now consider Suspense in the server-side rendering.

The Server Suspense approach

serverSuspense.tsx

async function UserList() {
  const getAllUsers = async () => {
    const res = await fetch('http://localhost:3000/api/users');
    return await res.json();
  };
  const users = await getAllUsers();
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>Name: {user.fullname}</li>
      ))}
    </ul>
  );
};

export default function UserListContainer() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserList />
    </Suspense>
  );
}

The component has a minor structural change. Specifically, React hooks are not used in this approach, and the responsibility for fetching data has been delegated to the child component, UserList.

Because this component is rendered on the server and then sent to the client, Suspense manages the pausing and resuming of rendering. This approach appears simpler than client-side rendering.

But what about the error handling, you may be thinking...

ErrorBoundary on Suspense

Although you can implement your own ErrorBoundary, using an npm package can save time and provide a more robust solution.

I recommend the use of react-error-boundary. Follow the instructions in the Readme.

<ErrorBoundary fallback={<div>Error</div>}>
    <Suspense fallback={<div>Loading...</div>}>
        <UserList />
    </Suspense>
</ErrorBoundary>

Similar to Suspense fallback, the fallback component in ErrorBoundary is displayed if there is an error.

Conclusion

By simplifying asynchronous logic and loading management, Suspense greatly enhances the developer experience. This simplification translates to reduced bug introduction, less and cleaner code, and easier testability.

Although our primary focus here has been data fetching, it's important to note that Suspense has other applications, including code splitting, resource loading, and managing concurrency in React.