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.

withSuspense

🚫

deprecated: Use wrap.Suspense().on instead

You can use withSuspense to wrap component by <Suspense/> easily. we don't need to make unncessary code to wrap it if we use withSuspense like below. withSuspense's 2nd parameter is props of <Suspense/> without children

import { withSuspense } from '@suspensive/react'
 
const Example = withSuspense(
  function Component() {
    // code make suspending
 
    return <>...</>
  },
  { fallback: <Spinner /> }
)

Installation <ErrorBoundary/>