How do I handle errors in React Suspense?

How do I handle errors in React Suspense?

In React Suspense, you can handle errors by using the Error Boundary component. This allows you to catch errors in the components that are being suspended.

Can you show me an example of an Error Boundary?

Sure! Here's a simple example:

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

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

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

You can wrap your Suspense components with this ErrorBoundary.

What happens if an error occurs in a lazy-loaded component?

If an error occurs in a lazy-loaded component, the Error Boundary will catch it, and you can display a fallback UI or log the error as needed.

Is there a way to show a loading state while waiting for the component?

Yes! You can use the fallback prop in the Suspense component to show a loading state while the lazy-loaded component is being fetched.