@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

Suspend an 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().

<script>
  const suspend = useSuspense()

  const promise = suspend(useTexture('/texture.png'))
</script>

Get Suspended State

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

<script>
  const { suspended } = useSuspense()

  $inspect($suspended)
</script>