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

useQueuer

Function: useQueuer()

ts
function useQueuer<TValue>(options): Queuer<TValue>
function useQueuer<TValue>(options): Queuer<TValue>

Defined in: queuer/useQueuer.ts:44

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 onItemsChange 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.

Type Parameters

TValue

Parameters

options

QueuerOptions<TValue> = {}

Returns

Queuer<TValue>

Example

tsx
// 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
  onItemsChange: (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
  onItemsChange: (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
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.