useQueuerState

Function: useQueuerState()

function useQueuerState<TValue>(options): readonly [TValue[], {
  addItem: (item, position?) => boolean;
  clear: () => void;
  getAllItems: () => TValue[];
  getExecutionCount: () => number;
  getNextItem: (position?) => undefined | TValue;
  isEmpty: () => boolean;
  isFull: () => boolean;
  isIdle: () => boolean;
  isRunning: () => boolean;
  onUpdate: (cb) => () => void;
  peek: (position?) => undefined | TValue;
  reset: (withInitialItems?) => void;
  size: () => number;
  start: () => void;
  stop: () => void;
 }]

function useQueuerState<TValue>(options): readonly [TValue[], {
  addItem: (item, position?) => boolean;
  clear: () => void;
  getAllItems: () => TValue[];
  getExecutionCount: () => number;
  getNextItem: (position?) => undefined | TValue;
  isEmpty: () => boolean;
  isFull: () => boolean;
  isIdle: () => boolean;
  isRunning: () => boolean;
  onUpdate: (cb) => () => void;
  peek: (position?) => undefined | TValue;
  reset: (withInitialItems?) => void;
  size: () => number;
  start: () => void;
  stop: () => void;
 }]

Defined in: react-pacer/src/queuer/useQueuerState.ts:54

A React hook that creates a queuer with managed state, combining React's useState with queuing functionality. This hook provides both the current queue state and queue control methods.

The queue state is automatically updated whenever items are added, removed, or reordered in the queue. All queue operations are reflected in the state array returned by the hook.

The queue can be started and stopped to automatically process items at a specified interval, making it useful as a scheduler. When started, it will process one item per tick, with an optional wait time between ticks.

The hook returns a tuple containing:

The current queue state as an array
The queue instance with methods for queue manipulation

Type Parameters

• TValue

Parameters

options

QueuerOptions<TValue> = {}

Returns

readonly [TValue[], { addItem: (item, position?) => boolean; clear: () => void; getAllItems: () => TValue[]; getExecutionCount: () => number; getNextItem: (position?) => undefined | TValue; isEmpty: () => boolean; isFull: () => boolean; isIdle: () => boolean; isRunning: () => boolean; onUpdate: (cb) => () => void; peek: (position?) => undefined | TValue; reset: (withInitialItems?) => void; size: () => number; start: () => void; stop: () => void; }]

Example

tsx

// Basic queue with initial items and priority
const [items, queue] = useQueuerState({
  initialItems: ['item1', 'item2'],
  started: true,
  wait: 1000,
  getPriority: (item) => item.priority
});

// Add items to queue
const handleAdd = (item) => {
  queue.addItem(item);
};

// Start automatic processing
const startProcessing = () => {
  queue.start();
};

// Stop automatic processing
const stopProcessing = () => {
  queue.stop();
};

// Manual processing still available
const handleProcess = () => {
  const nextItem = queue.getNextItem();
  if (nextItem) {
    processItem(nextItem);
  }
};

// Basic queue with initial items and priority
const [items, queue] = useQueuerState({
  initialItems: ['item1', 'item2'],
  started: true,
  wait: 1000,
  getPriority: (item) => item.priority
});

// Add items to queue
const handleAdd = (item) => {
  queue.addItem(item);
};

// Start automatic processing
const startProcessing = () => {
  queue.start();
};

// Stop automatic processing
const stopProcessing = () => {
  queue.stop();
};

// Manual processing still available
const handleProcess = () => {
  const nextItem = queue.getNextItem();
  if (nextItem) {
    processItem(nextItem);
  }
};