In a React application, handling network errors and displaying a fallback UI can be a challenge. However, with the introduction of Suspense in React, error boundaries can now be used to catch and handle errors thrown during the rendering of components. In this article, we will explore how to handle network errors with suspense in React.

What is Suspense?

Suspense is a feature introduced in React 16.6 that allows components to wait for something (like data fetching) before rendering. It helps in creating a better user experience by displaying loading spinners or fallback UIs while waiting for the required data.

Handling network errors with Suspense

To handle network errors with Suspense, we need to define an error boundary component that will catch any errors thrown during rendering. Here’s an example of an error boundary component:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Log or handle the error
    console.error(error);
  }

  render() {
    if (this.state.hasError) {
      // Display a fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

In the above code, we create an error boundary component that sets a state flag hasError to true if an error occurs in any of its child components. The getDerivedStateFromError method is used to update the state, and the componentDidCatch method is used to log or handle the error.

Now, let’s see how to use this error boundary component with Suspense to handle network errors. Assume we have a component DataFetcher that fetches data from a remote API. We can use Suspense to wrap the DataFetcher component and add the error boundary component as a fallback UI:

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

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<h1>Loading...</h1>}>
        <DataFetcher />
      </Suspense>
    </ErrorBoundary>
  );
}

export default App;

In the above code, the DataFetcher component is lazily imported using React.lazy. The Suspense component wraps the DataFetcher component and provides a fallback UI (<h1>Loading...</h1>) while the data is being fetched. If an error occurs during rendering, the error boundary component will catch it and display the fallback UI instead.

Conclusion

Handling network errors and displaying fallback UIs in a React application can be made easier using the Suspense feature with error boundaries. By defining an error boundary component and wrapping it around Suspense, we can catch and handle errors thrown during rendering, providing a better user experience.