useAsyncQueuerState

Function: useAsyncQueuerState()

function useAsyncQueuerState<TValue>(options): readonly [() => Promise<TValue>[], {
  addItem: (fn, position?) => Promise<TValue>;
  clear: () => void;
  getActiveItems: () => () => Promise<TValue>[];
  getAllItems: () => () => Promise<TValue>[];
  getExecutionCount: () => number;
  getNextItem: (position?) => undefined | () => Promise<TValue>;
  getPendingItems: () => () => Promise<TValue>[];
  isEmpty: () => boolean;
  isFull: () => boolean;
  isIdle: () => boolean;
  isRunning: () => boolean;
  onError: (cb) => () => void;
  onSettled: (cb) => () => void;
  onSuccess: (cb) => () => void;
  peek: (position?) => undefined | () => Promise<TValue>;
  reset: (withInitialItems?) => void;
  size: () => number;
  start: () => Promise<void>;
  stop: () => void;
  throttle: (n) => void;
 }]

function useAsyncQueuerState<TValue>(options): readonly [() => Promise<TValue>[], {
  addItem: (fn, position?) => Promise<TValue>;
  clear: () => void;
  getActiveItems: () => () => Promise<TValue>[];
  getAllItems: () => () => Promise<TValue>[];
  getExecutionCount: () => number;
  getNextItem: (position?) => undefined | () => Promise<TValue>;
  getPendingItems: () => () => Promise<TValue>[];
  isEmpty: () => boolean;
  isFull: () => boolean;
  isIdle: () => boolean;
  isRunning: () => boolean;
  onError: (cb) => () => void;
  onSettled: (cb) => () => void;
  onSuccess: (cb) => () => void;
  peek: (position?) => undefined | () => Promise<TValue>;
  reset: (withInitialItems?) => void;
  size: () => number;
  start: () => Promise<void>;
  stop: () => void;
  throttle: (n) => void;
 }]

Defined in: react-pacer/src/async-queuer/useAsyncQueuerState.ts:50

A higher-level React hook that creates an AsyncQueuer instance with built-in state management.

This hook combines an AsyncQueuer with React state to automatically track the queue items. It returns a tuple containing:

The current array of queued items as React state
The queuer instance with methods to control the queue

The queue can be configured with:

Maximum concurrent operations
Maximum queue size
Processing function for queue items
Various lifecycle callbacks

The state will automatically update whenever items are:

Added to the queue
Removed from the queue
Started processing
Completed processing

readonly [() => Promise<TValue>[], { addItem: (fn, position?) => Promise<TValue>; clear: () => void; getActiveItems: () => () => Promise<TValue>[]; getAllItems: () => () => Promise<TValue>[]; getExecutionCount: () => number; getNextItem: (position?) => undefined | () => Promise<TValue>; getPendingItems: () => () => Promise<TValue>[]; isEmpty: () => boolean; isFull: () => boolean; isIdle: () => boolean; isRunning: () => boolean; onError: (cb) => () => void; onSettled: (cb) => () => void; onSuccess: (cb) => () => void; peek: (position?) => undefined | () => Promise<TValue>; reset: (withInitialItems?) => void; size: () => number; start: () => Promise<void>; stop: () => void; throttle: (n) => void; }]

Example

tsx

// Create a queue with state management
const [queueItems, asyncQueuer] = useAsyncQueuerState({
  concurrency: 2,
  maxSize: 100,
  started: true
});

// Add items to queue - state updates automatically
asyncQueuer.addItem(async () => {
  const result = await fetchData();
  return result;
});

// Start processing
asyncQueuer.start();

// Stop processing
asyncQueuer.stop();

// queueItems reflects current queue state
const pendingCount = asyncQueuer.getPendingItems().length;

// Create a queue with state management
const [queueItems, asyncQueuer] = useAsyncQueuerState({
  concurrency: 2,
  maxSize: 100,
  started: true
});

// Add items to queue - state updates automatically
asyncQueuer.addItem(async () => {
  const result = await fetchData();
  return result;
});

// Start processing
asyncQueuer.start();

// Stop processing
asyncQueuer.stop();

// queueItems reflects current queue state
const pendingCount = asyncQueuer.getPendingItems().length;

useAsyncQueuerState

Function: useAsyncQueuerState()

Type Parameters

Parameters

options

Returns

Example

Subscribe to Bytes

Subscribe to Bytes