useSuspenseAtomicProp · @yoltra/react

Overload 1

signature

useSuspenseAtomicProp<R, S, P, T>(storeSpec, options): T

Suspense-compatible version of useAtomicProp that throws a promise while loading. Subscribes to a single dotted path and calls options.load to produce the resolved value. While the promise is pending, React Suspense catches it and renders the nearest <Suspense> fallback.

Type parameters

Name	Type	Description
`R`	`extends string`	Reducer name union.
`S`	`extends Record<R, any>`	State record keyed by `R`.
`P`	`extends string`	Dotted path within `S[R]`.
`T`	`—`	Resolved value type.

Parameters

storeSpec — object with:

Name	Type	Description
`property`	`P`
`reducer`	`R`

Name	Type	Description
`options`	`SuspenseAtomicPropOptions<T, S>`	Loading options (see `SuspenseAtomicPropOptions`).

Returns

T — The resolved value of type T.

Example

example

function UserName({ userId }: { userId: string }) {
  const name = useSuspenseAtomicProp(
    { reducer: 'users', property: `byId.${userId}.name` },
    { load: async (name) => name ?? (await fetchUser(userId)).name },
  );
  return <span>{name}</span>;
}

// Wrap with Suspense
<Suspense fallback={<Spinner />}>
  <UserName userId="123" />
</Suspense>

Overload 2