> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```js theme={"system"}
import {useAsyncCache} from "attio/client"
```

<Warning>
  While the async functions are running, the component that uses this hook will "suspend".

  You *MUST* wrap the component in a
  [`<React.Suspense/>`](https://react.dev/reference/react/Suspense) component
  and give it a `fallback` component to render until the functions have completed.
</Warning>

## Example

```ts load-widgets.server.ts theme={"system"}
export default async function loadWidgets(): Promise<Array<Widget>> {
  // fetch widgets from somewhere
}
```

```ts load-sprockets.server.ts theme={"system"}
export default async function loadSprockets(
  material: Material,
  max?: number,
): Promise<Array<Sprocket>> {
  // fetch sprockets from somewhere
}
```

```tsx theme={"system"}
import {useAsyncCache} from "attio/client"

import loadWidgets from "./load-widgets.server.ts"
import loadSprockets from "./load-sprockets.server.ts"

// ...

// inside component:

const results = useAsyncCache({
  // loadWidgets takes zero parameters and can thus be called without an array
  widgets: loadWidgets,
  // loadSprockets takes a `material` parameter, so we call it like this
  ironSprockets: [loadSprockets, "iron"],
  copperSprockets: [loadSprockets, "copper", 42],
})

const {widgets, ironSprockets, copperSprockets} = results.values

// ...

// inside an event handler, perhaps, to refetch _only_ the iron sprockets
results.invalidate("ironSprockets")
```

## 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 the `string` keys provided to whatever type that key's async
  function returns
* `invalidate`: a `(key: string) => void` function to call to invalidate individual cached
  values, called with the key you want to invalidate

<Warning>
  Calling `invalidate()` will cause the values for the specified function to be fetched again,
  re-suspending the component.
</Warning>

## Alternative: React Query

For advanced data fetching needs, you can use the popular [React Query](./react-query) library.