Skip to Content
Docs@suspensive/reactGetting Started

Getting Started

Build your first async-safe React page with Suspensive in 3 minutes.

Install packages

npm install @suspensive/react

Wrap your app with ErrorBoundary and Suspense

Replace manual loading/error state checks with declarative boundaries:

import { ErrorBoundary, Suspense } from '@suspensive/react'
 
function App() {
  return (
    <ErrorBoundary
      fallback={({ error, reset }) => (
        <div>
          <p>Something went wrong: {error.message}</p>
          <button onClick={reset}>Try again</button>
        </div>
      )}
    >
      <Suspense fallback={<div>Loading...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  )
}

Add SSR safety with clientOnly

If you’re using Next.js or another SSR framework, prevent hydration issues:

import { Suspense } from '@suspensive/react'
 
function Page() {
  return (
    <Suspense fallback={<Skeleton />} clientOnly>
      <UserProfile />
    </Suspense>
  )
}

Group error boundaries for coordinated resets

Reset multiple error boundaries at once without prop drilling:

import { ErrorBoundary, ErrorBoundaryGroup } from '@suspensive/react'
 
function Dashboard() {
  return (
    <ErrorBoundaryGroup>
      <ErrorBoundaryGroup.Consumer>
        {({ reset }) => <button onClick={reset}>Reset All</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={<UserError />}>
        <UserSection />
      </ErrorBoundary>
      <ErrorBoundary fallback={<StatsError />}>
        <StatsSection />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  )
}

Next Steps

Last updated on
InstallationSuspensive vs react-error-boundary