Framework
Version
Debouncer API Reference
Throttler API Reference
Rate Limiter API Reference
Queue API Reference
Batcher API Reference

useAsyncQueuer

Function: useAsyncQueuer()

ts
function useAsyncQueuer<TValue, TSelected>(
   fn, 
   options, 
selector?): ReactAsyncQueuer<TValue, TSelected>
function useAsyncQueuer<TValue, TSelected>(
   fn, 
   options, 
selector?): ReactAsyncQueuer<TValue, TSelected>

Defined in: react-pacer/src/async-queuer/useAsyncQueuer.ts:64

A lower-level React hook that creates an AsyncQueuer instance for managing an async queue of items.

Features:

  • Priority queue support via getPriority option
  • Configurable concurrency limit
  • Task success/error/completion callbacks
  • FIFO (First In First Out) or LIFO (Last In First Out) queue behavior
  • Pause/resume task processing
  • Task cancellation
  • Item expiration to clear stale items from the queue

Tasks are processed concurrently up to the configured concurrency limit. When a task completes, the next pending task is processed if below the concurrency limit.

Error Handling:

  • If an onError handler is provided, it will be called with the error and queuer instance
  • If throwOnError is true (default when no onError handler is provided), the error will be thrown
  • If throwOnError is false (default when onError handler is provided), the error will be swallowed
  • Both onError and throwOnError can be used together - the handler will be called before any error is thrown
  • The error state can be checked using the underlying AsyncQueuer instance

Type Parameters

TValue

TSelected = AsyncQueuerState<TValue>

Parameters

fn

(value) => Promise<any>

options

AsyncQueuerOptions<TValue> = {}

selector?

(state) => TSelected

Returns

ReactAsyncQueuer<TValue, TSelected>

Example

tsx
// Basic async queuer for API requests
const asyncQueuer = useAsyncQueuer({
  initialItems: [],
  concurrency: 2,
  maxSize: 100,
  started: false,
  onSuccess: (result) => {
    console.log('Item processed:', result);
  },
  onError: (error) => {
    console.error('Processing failed:', error);
  }
});

// Add items to queue
asyncQueuer.addItem(newItem);

// Start processing
asyncQueuer.start();
// Basic async queuer for API requests
const asyncQueuer = useAsyncQueuer({
  initialItems: [],
  concurrency: 2,
  maxSize: 100,
  started: false,
  onSuccess: (result) => {
    console.log('Item processed:', result);
  },
  onError: (error) => {
    console.error('Processing failed:', error);
  }
});

// Add items to queue
asyncQueuer.addItem(newItem);

// Start processing
asyncQueuer.start();
Our Partners
Unkey
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.

Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.