Suspense

@suspensive/react’s <Suspense/> will be just Suspense of original React .

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 <DefaultPropsProvider/>. Control multiple <Suspense/>s default fallback with <DefaultPropsProvider/>. Details are introduced in <DefaultPropsProvider/> page.

Avoid Server side rendering (clientOnly)

If you use clientOnly prop, <Suspense/> will return fallback in server and return children in client.


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

When using the clientOnly prop, the useIsClient hook is used internally, and useIsClient uses getSnapshot and getServerSnapshot of useSyncExternalStore to ensure that it is a client.


const useIsClient = () =>
  useSyncExternalStore(emptySubscribe, getSnapshot, getServerSnapshot)
 
const emptySubscribe = () => noop
const getSnapshot = () => true
const getServerSnapshot = () => false

https://x.com/TkDodo/status/1741068994981826947?t=XmG17etMUL2m0JFim03vqw&s=19

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.