useBatchedCallback

function useBatchedCallback<TValue>(fn, options): (item) => void;

Defined in: batcher/useBatchedCallback.ts:40

A React hook that creates a batched version of a callback function. This hook is essentially a wrapper around the basic batch function that is exported from @tanstack/pacer, but optimized for React with reactive options and a stable function reference.

The batched function will collect individual calls into batches and execute them when batch conditions are met (max size reached, wait time elapsed, or custom logic).

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

For advanced usage requiring features like:

• Manual batch execution
• Access to batch state and metrics
• Custom useCallback dependencies

Consider using the useBatcher hook instead.

Type Parameters

TValue

TValue

Parameters

fn

(items) => void

options

ReactBatcherOptions<TValue, { }>

Returns

(item) => void

Example

// Batch analytics events
const trackEvents = useBatchedCallback((events: AnalyticsEvent[]) => {
  sendAnalytics(events);
}, {
  maxSize: 5,    // Process when 5 events collected
  wait: 2000     // Or after 2 seconds
});

// Use in event handlers
<button onClick={() => trackEvents({ type: 'click', target: 'button' })}>
  Click me
</button>