0Pricing
TypeScript Academy · Lesson

Suspense & error boundaries types

Use React.Suspense with lazy components and type robust Error Boundaries (class-based). Handle unknown errors safely and provide reset patterns.

Suspense & error boundaries types is a free TypeScript Academy lesson on CoddyKit — lesson 2 of 2. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 2 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Intro

Goal: Lazy-load components with React.lazy + Suspense, and add a typed Error Boundary that shows a friendly fallback and logs details.

  • Suspense = loading UI
  • Error Boundary = runtime error UI
  • Type unknown errors safely

Lazy + Suspense

React.lazy returns a component type. Wrap it in Suspense to render a fallback while its module is loading.

import React, { Suspense } from "react"

const LazyWidget = React.lazy(async () => import("./Widget"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <Suspense fallback={<span>Loading…</span>}>
        <LazyWidget />
      </Suspense>
    </div>
  )
}

Lazy props typing

Props are inferred from the imported module's default export. Calling site remains fully typed.

import React, { Suspense } from "react"

// Ensure props are preserved through lazy
interface ChartProps { title: string; values: number[] }
const Chart = React.lazy(async () => import("./Chart"))

export default function App() {
  return (
    <Suspense fallback={<span>Loading chart…</span>}>
      <Chart title="Sales" values={[10, 20, 15]} />
    </Suspense>
  )
}

ErrorBoundary typing

Type error handlers with unknown and narrow to Error if needed. Use React.ErrorInfo to access the component stack.

import React from "react"

interface Props { fallback: React.ReactNode }
interface State { hasError: boolean; message?: string }

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = { hasError: false }

  static getDerivedStateFromError(err: unknown): State {
    const msg = err instanceof Error ? err.message : String(err)
    return { hasError: true, message: msg }
  }

  componentDidCatch(error: unknown, info: React.ErrorInfo) {
    // log error & component stack safely
    console.error("ErrorBoundary", error, info.componentStack)
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <span>Something went wrong</span>
    }
    return this.props.children
  }
}

Compose boundaries

Combine Suspense (loading) and Error Boundary (errors). They solve different concerns and can be nested per section.

import React, { Suspense } from "react"
import { ErrorBoundary } from "./ErrorBoundary"

const Page = React.lazy(async () => import("./Page"))

export default function App() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      <ErrorBoundary fallback={<span>Failed to load page</span>}>
        <Suspense fallback={<span>Loading page…</span>}>
          <Page />
        </Suspense>
      </ErrorBoundary>
    </div>
  )
}

Reset patterns

Reset tips:

  • Reset ErrorBoundary by changing its key.
  • Offer a “Try again” button to refetch or remount.
  • Keep fallbacks small and accessible.

Boundary typing check

Quick check: How do you catch render-time errors with a typed fallback?

Recap

Recap: Suspense handles loading; Error Boundaries handle errors. Type unknown errors carefully and provide reset strategies.

Frequently asked questions

Is the “Suspense & error boundaries types” lesson free?

Yes — the full text of “Suspense & error boundaries types” is free to read here on the web, and the TypeScript Academy course includes 2 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Suspense & error boundaries types”?

Use React.Suspense with lazy components and type robust Error Boundaries (class-based). Handle unknown errors safely and provide reset patterns. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 2, so you can start here or from the beginning and move at your own pace.

How long does the “Suspense & error boundaries types” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Custom hooks with generics & inference
  2. Suspense & error boundaries types
← Back to TypeScript Academy