How can I handle errors in React.lazy?

How can I handle errors in React.lazy?

You can handle errors in React.lazy by using the Error Boundary component. This allows you to catch errors in the lazy-loaded component.

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 Error Boundary:', error);
  }

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

You can wrap your lazy-loaded component with this Error Boundary.

What happens if the lazy component fails to load?

If the lazy component fails to load, the Error Boundary will catch the error and render the fallback UI you provide, such as an error message.

Is there a way to show a loading state while the component is being loaded?

Yes! You can use the Suspense component from React to show a loading state while the lazy component is being loaded. Here's an example:

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>