useTaskQueue

A React hook for managing and executing a sequential queue of asynchronous tasks with automatic concurrency control.

Note

This queue processes tasks sequentially (one by one). If a task hangs or takes a long time, it will block all subsequent tasks in the queue.

Installation

bash

Description

The useTaskQueue hook provides a reliable way to handle a series of asynchronous operations (Tasks) that must be executed one after another. It maintains an internal queue and automatically triggers the execution loop as new tasks are added. This is particularly useful for scenarios like processing sequential API uploads, database synchronizations, or any operation where race conditions must be avoided by ensuring only one task runs at a time.

Return values

NameTypeDescription
enqueue(task: Task<T>) => voidAdds a new task to the end of the queue.
queueTask<T>[]A reactive array containing the tasks currently waiting in the queue.
runningbooleanA reactive state indicating if a task is currently being executed.

Demo

Task Queue

System idle

Pending Queue (0)

No tasks to process.

Completed Tasks (0)

Source code

tsx