function useQueuer<TValue>(options): object
function useQueuer<TValue>(options): object
Defined in: react-pacer/src/queuer/useQueuer.ts:43
A React hook that creates and manages a Queuer instance.
This is a lower-level hook that provides direct access to the Queuer's functionality without any built-in state management. This allows you to integrate it with any state management solution you prefer (useState, Redux, Zustand, etc.) by utilizing the onUpdate callback.
For a hook with built-in state management, see useQueuerState.
The Queuer extends the base Queue to add processing capabilities. Items are processed synchronously in order, with optional delays between processing each item. The queuer includes an internal tick mechanism that can be started and stopped, making it useful as a scheduler. When started, it will process one item per tick, with an optional wait time between ticks.
By default uses FIFO (First In First Out) behavior, but can be configured for LIFO (Last In First Out) by specifying 'front' position when adding items.
• TValue
QueuerOptions<TValue> = {}
object
readonly addItem: (item, position?, runOnUpdate?) => boolean;
readonly addItem: (item, position?, runOnUpdate?) => boolean;
Adds an item to the queuer and starts processing if not already running
TValue
QueuePosition
boolean
boolean
true if item was added, false if queuer is full
readonly clear: () => void;
readonly clear: () => void;
Removes all items from the queuer
void
readonly getAllItems: () => TValue[];
readonly getAllItems: () => TValue[];
Returns a copy of all items in the queuer
TValue[]
readonly getExecutionCount: () => number;
readonly getExecutionCount: () => number;
Returns the number of items that have been removed from the queuer
number
readonly getNextItem: (position?) => undefined | TValue;
readonly getNextItem: (position?) => undefined | TValue;
Removes and returns an item from the queuer using shift (default) or pop
QueuePosition
undefined | TValue
// Standard FIFO queuer
queuer.getNextItem()
// Stack-like behavior (LIFO)
queuer.getNextItem('back')
// Standard FIFO queuer
queuer.getNextItem()
// Stack-like behavior (LIFO)
queuer.getNextItem('back')
readonly isEmpty: () => boolean;
readonly isEmpty: () => boolean;
Returns true if the queuer is empty
boolean
readonly isFull: () => boolean;
readonly isFull: () => boolean;
Returns true if the queuer is full
boolean
readonly isIdle: () => boolean;
readonly isIdle: () => boolean;
Returns true if the queuer is running but has no items to process
boolean
readonly isRunning: () => boolean;
readonly isRunning: () => boolean;
Returns true if the queuer is running
boolean
readonly onUpdate: (cb) => () => void;
readonly onUpdate: (cb) => () => void;
Adds a callback to be called when an item is processed
(item) => void
Function
void
readonly peek: (position?) => undefined | TValue;
readonly peek: (position?) => undefined | TValue;
Returns an item without removing it
QueuePosition
undefined | TValue
// Look at next item to getNextItem
queuer.peek()
// Look at last item (like stack top)
queuer.peek('back')
// Look at next item to getNextItem
queuer.peek()
// Look at last item (like stack top)
queuer.peek('back')
readonly reset: (withInitialItems?) => void;
readonly reset: (withInitialItems?) => void;
Resets the queuer to its initial state
boolean
void
readonly size: () => number;
readonly size: () => number;
Returns the current size of the queuer
number
readonly start: () => void;
readonly start: () => void;
Starts the queuer and processes items
void
readonly stop: () => void;
readonly stop: () => void;
Stops the queuer from processing items
void
// Example with custom state management and scheduling
const [items, setItems] = useState([]);
const queue = useQueuer({
started: true, // Start processing immediately
wait: 1000, // Process one item every second
onUpdate: (queue) => setItems(queue.getAllItems()),
getPriority: (item) => item.priority // Process higher priority items first
});
// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');
// Control the scheduler
queue.stop(); // Pause processing
queue.start(); // Resume processing
// Example with custom state management and scheduling
const [items, setItems] = useState([]);
const queue = useQueuer({
started: true, // Start processing immediately
wait: 1000, // Process one item every second
onUpdate: (queue) => setItems(queue.getAllItems()),
getPriority: (item) => item.priority // Process higher priority items first
});
// Add items to process - they'll be handled automatically
queue.addItem('task1');
queue.addItem('task2');
// Control the scheduler
queue.stop(); // Pause processing
queue.start(); // Resume processing
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.