Suspense, Lazy Loading & Error Boundaries

Build Suspense, Lazy Loading & Error Boundaries as a user flow with pending, success, empty, error, retry, cancellation, and navigation recovery states. Give every route or asynchronous boundary intentional fallback and recovery behavior.

Build a Complete Mental Model

Build Suspense, Lazy Loading & Error Boundaries as a user flow with pending, success, empty, error, retry, cancellation, and navigation recovery states. Give every route or asynchronous boundary intentional fallback and recovery behavior.

Apply It in Production React

Test an original Suspense, Lazy Loading & Error Boundaries example with empty/loading/error states, keyboard-only interaction, a slow network, rapid repeated events, and component unmount/remount cases. Verify behavior with the browser console, React DevTools, tests, and profiler where relevant.

After This Lesson

• Explain the source of truth and component boundary
• Build an example with keyboard and failure states
• Verify one user-visible behavior with a test or profiler

import { Component, lazy, Suspense } from 'react';

const Reports = lazy(() => import('./Reports.jsx'));

class ErrorBoundary extends Component {
  state = { failed: false };
  static getDerivedStateFromError() { return { failed: true }; }
  render() {
    return this.state.failed ? <p role="alert">Could not load reports.</p> : this.props.children;
  }
}

export default function App() {
  return <ErrorBoundary>
    <Suspense fallback={<p>Loading reports…</p>}>
      <Reports />
    </Suspense>
  </ErrorBoundary>;
}

Users see a loading fallback, then reports or a recoverable error message.

Suspense — React