| id | useAsyncBatchedCallback |
|---|---|
| title | useAsyncBatchedCallback |
function useAsyncBatchedCallback<TValue, TResult>(fn, options): (item) => Promise<void>Defined in: react-pacer/src/async-batcher/useAsyncBatchedCallback.ts:42
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.
• TValue
• TResult
(items) => Promise<TResult>
AsyncBatcherOptions<TValue, TResult>
Function
TValue
Promise<void>
// 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>