snippettypescriptreactModeratepending

React Suspense and ErrorBoundary — async data pattern

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

React 18+

SuspenseErrorBoundaryloadingerrorfallbackstreaming

browsernodejs

Problem

Loading and error states create repetitive conditional rendering in every component that fetches data. Need a declarative way to handle async states.

Solution

Combine React Suspense for loading states with ErrorBoundary for error states. In Next.js App Router, use loading.tsx and error.tsx for route-level boundaries.

Code Snippets

Suspense + ErrorBoundary wrapper pattern

import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

// Wrapper component
function AsyncBoundary({ children, fallback, errorFallback }) {
  return (
    <ErrorBoundary
      fallbackRender={({ error, resetErrorBoundary }) => (
        <div role="alert">
          <p>Something went wrong: {error.message}</p>
          <button onClick={resetErrorBoundary}>Retry</button>
        </div>
      )}
    >
      <Suspense fallback={fallback || <Loading />}>
        {children}
      </Suspense>
    </ErrorBoundary>
  );
}

// Usage — each section loads independently
export default function Dashboard() {
  return (
    <div>
      <AsyncBoundary fallback={<Skeleton />}>
        <UserStats />
      </AsyncBoundary>
      <AsyncBoundary fallback={<Skeleton />}>
        <RecentActivity />
      </AsyncBoundary>
    </div>
  );
}

Revisions (0)

No revisions yet.