Lazy Loading & Code Splitting

What pattern should be used for error boundaries with lazy-loaded React components?

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) {
      return <FallbackComponent />;
    }
    return this.props.children;
  }
}

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

Try/catch blocks only
Global error handler
Error Boundary component wrapping Suspense
Using Error Boundary components to wrap Suspense and lazy-loaded components is the recommended pattern because: 1) It provides a declarative way to handle loading errors, 2) Prevents errors in lazy-loaded components from crashing the entire application, 3) Allows for graceful fallback UI when loading fails, 4) Integrates well with React's component lifecycle and error handling model. The example shows proper implementation with a fallback UI and clear separation of concerns between error handling, loading states, and component rendering.
No error handling needed

Next Question (13/20)