Hooks
useAsyncCache()
A suspenseful hook that returns, and caches, the results of calling one or more async functions, typically to load data from a third-party via server functions.
While the async functions are running, the component that uses this hook will “suspend”.
You MUST wrap the component in a
<React.Suspense/>
component
and give it a fallback
component to render until the functions have completed.
Parameters
It takes an object mapping a string
key to an async function. If the function requires parameters,
the key should map to an array with the async function as the first element and the parameters as
the subsequent elements.
Returns
An object containing:
values
: an object mapping from thestring
keys provided to whatever type that key’s async function returnsinvalidate
: a(key: string) => void
function to call to invalidate individual cached values, called with the key you want to invalidate
Calling invalidate()
will cause the values for the specified function to be fetched again,
re-suspending the component.
Example Usage
load-widgets.server.tsx
load-sprockets.server.ts