How can I handle errors in React Suspense?

How can I handle errors in React Suspense?

You can handle errors in React Suspense by using the ErrorBoundary component. It allows you to catch errors in the components that are wrapped in it.

Can you show me a code example of using ErrorBoundary?

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 ErrorBoundary will catch it, and you can display a fallback UI or an error message.

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

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