function createQueuer<TValue, TSelected>(
fn,
initialOptions,
selector): SolidQueuer<TValue, TSelected>
function createQueuer<TValue, TSelected>(
fn,
initialOptions,
selector): SolidQueuer<TValue, TSelected>
Defined in: queuer/createQueuer.ts:101
Creates a Solid-compatible Queuer instance for managing a synchronous queue of items, exposing Solid signals for all stateful properties.
Features:
The queue processes items synchronously in order, with optional delays between each item. When started, it will process one item per tick, with an optional wait time between ticks. You can pause and resume processing with stop() and start().
By default, the queue uses FIFO behavior, but you can configure LIFO or double-ended queueing by specifying the position when adding or removing items.
The hook uses TanStack Store for reactive state management. The selector parameter allows you to specify which state changes will trigger a re-render, optimizing performance by preventing unnecessary re-renders when irrelevant state changes occur.
By default, there will be no reactive state subscriptions and you must opt-in to state tracking by providing a selector function. This prevents unnecessary re-renders and gives you full control over when your component updates. Only when you provide a selector will the component re-render when the selected state values change.
Available state properties:
Example usage:
// Default behavior - no reactive state subscriptions
const queue = createQueuer(
(item) => {
// process item synchronously
console.log('Processing', item);
},
{
started: true, // Start processing immediately
wait: 1000, // Process one item every second
getPriority: (item) => item.priority // Process higher priority items first
}
);
// Opt-in to re-render when items or isRunning changes (optimized for UI updates)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({ items: state.items, isRunning: state.isRunning })
);
// Opt-in to re-render when execution metrics change (optimized for tracking progress)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
rejectionCount: state.rejectionCount
})
);
// 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
// Access the selected state (will be empty object {} unless selector provided)
const { items, isRunning } = queue.state();
// Default behavior - no reactive state subscriptions
const queue = createQueuer(
(item) => {
// process item synchronously
console.log('Processing', item);
},
{
started: true, // Start processing immediately
wait: 1000, // Process one item every second
getPriority: (item) => item.priority // Process higher priority items first
}
);
// Opt-in to re-render when items or isRunning changes (optimized for UI updates)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({ items: state.items, isRunning: state.isRunning })
);
// Opt-in to re-render when execution metrics change (optimized for tracking progress)
const queue = createQueuer(
(item) => console.log('Processing', item),
{ started: true, wait: 1000 },
(state) => ({
executionCount: state.executionCount,
rejectionCount: state.rejectionCount
})
);
// 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
// Access the selected state (will be empty object {} unless selector provided)
const { items, isRunning } = queue.state();
• TValue
• TSelected = {}
(item) => void
QueuerOptions<TValue> = {}
(state) => TSelected
SolidQueuer<TValue, TSelected>
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.