@threlte/extras

useSuspense

The hook useSuspense is used to mark a resource as being used in a <Suspense> boundary or to get the suspended-state of the closest <Suspense> boundary. For a complete implementation example, have a look at the <Suspense> component.

Usage

Mark as Async Resource

The hook returns a function that allows you to mark a resource as being used in a <Suspense> boundary. To suspend the closest <Suspense> boundary, call the function returned by useSuspense() and pass a promise as the first argument. Because useLoader().load() returns an AsyncWritable, the result of useLoader().load() can be passed directly to the function returned by useSuspense().

const suspend = useSuspense()
suspend(useTexture('/texture.png'))

Get Suspended State

The hook can be used to get the suspended-state of the closest <Suspense> boundary.

const { suspended } = useSuspense()
$: console.log($suspended)