Suspense

@suspensive/react's <Suspense/> will be just Suspense of original React (opens in a new tab).

props.fallback

fallback works the same as fallback of original React's Suspense.

import { Suspense } from '@suspensive/react'
 
const Example = () => (
  <Suspense fallback={<Loading />}>
    <Children />
  </Suspense>
)

💡

Default fallback

<Suspense/> are more powerful when used with <SuspensiveProvider/>. Control multiple <Suspense/>s default fallback with <SuspensiveProvider/>. Details are introduced in <SuspensiveProvider/> page.

Avoid Server side rendering (clientOnly)

If you use clientOnly prop, <Suspense/> will return fallback in server. After mount(in client) return children. Since mount only happens on the client, server-side rendering can be avoided.

import { Suspense } from '@suspensive/react'
 
const Example = () => (
  <Suspense clientOnly fallback={<Loading />}>
    <Children />
  </Suspense>
)

Migration support SSR gradually (<Suspense clientOnly/> -> <Suspense/>)

If you want to use Suspense working in both SSR/CSR, You can change <Suspense clientOnly/> to <Suspense/> gradually.

Migrating to v2 <ErrorBoundary/>