# useAsyncBatchedCallback

# Function: useAsyncBatchedCallback()

```ts
function useAsyncBatchedCallback<TValue>(fn, options): (item) => Promise<void>;
```

Defined in: [react-pacer/src/async-batcher/useAsyncBatchedCallback.ts:42](https://github.com/TanStack/pacer/blob/main/packages/react-pacer/src/async-batcher/useAsyncBatchedCallback.ts#L42)

A React hook that creates a batched version of an async callback function.
This hook is a convenient wrapper around the `useAsyncBatcher` hook,
providing a stable, batched async function reference for use in React components.

The batched async function will collect individual calls into batches and execute them
when batch conditions are met (max size reached, wait time elapsed, or custom logic).
The returned function always returns a promise that resolves with undefined (since the
batch function processes multiple items together).

This hook provides a simpler API compared to `useAsyncBatcher`, making it ideal for basic
async batching needs. However, it does not expose the underlying AsyncBatcher instance.

For advanced usage requiring features like:
- Manual batch execution
- Access to batch results and state
- Custom useCallback dependencies

Consider using the `useAsyncBatcher` hook instead.

## Type Parameters

### TValue

`TValue`

## Parameters

### fn

(`items`) => `Promise`\<`unknown`\>

### options

[`ReactAsyncBatcherOptions`](../interfaces/ReactAsyncBatcherOptions.md)\<`TValue`, \{
\}\>

## Returns

```ts
(item): Promise<void>;
```

### Parameters

#### item

`TValue`

### Returns

`Promise`\<`void`\>

## Example

```tsx
// Batch API requests
const batchApiCall = useAsyncBatchedCallback(async (requests: ApiRequest[]) => {
  const results = await Promise.all(requests.map(req => fetch(req.url)));
  return results.map(res => res.json());
}, {
  maxSize: 10,   // Process when 10 requests collected
  wait: 1000     // Or after 1 second
});

// Use in event handlers
<button onClick={() => batchApiCall({ url: '/api/analytics', data: eventData })}>
  Track Event
</button>
```