use-queue

library0.1.1jsnpmunverified

A lightweight React hook-based queue utility that processes items in FIFO order. Version 0.1.1 is the latest stable release, with no recent updates. Designed for simple queuing needs in React applications, it offers a single hook that manages a queue and triggers a user-provided process function for each item. Unlike more complex state management solutions, it focuses solely on queue functionality and is fully typed with TypeScript definitions. Ideal for scenarios like throttling API calls or sequential task processing.

productivity

npm install use-queue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · USE-QUEUE

use-queue

productivityjavascriptv0.1.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useQueue

✓ import useQueue from 'use-queue'

✗ import { useQueue } from 'use-queue'

Default export only; named import will result in undefined.

Demonstrates hook initialization with a process function, queue state, and add action.

import React from 'react'; import useQueue from 'use-queue'; function processItem(item, done) { setTimeout(() => { console.log('Processing:', item); done(); }, 1000); } function App() { const [queue, add] = useQueue(processItem); return ( <div> <pre>{JSON.stringify(queue, null, 2)}</pre> <button onClick={() => add('Task ' + Date.now())}>Add to Queue</button> </div> ); } export default App;

Debug

Known issues

gotchaThe process function must call the done callback to remove the item from the queue; otherwise, the queue stalls and never empties.

fix

Ensure done() is invoked after processing each item.

affects: >=0.0.0

gotchaThe hook does not provide error handling; if done() is called multiple times or never, behavior is undefined.

fix

Wrap done() in a try-finally or guard against double invocation.

affects: >=0.0.0

gotchaThe queue array in state is a snapshot; mutating it directly will not update the component.

fix

Use the add function or re-queue via the hook return value.

affects: >=0.0.0

gotchaThis package has not been updated since 2020 and relies on an older React peer dependency (>=16). No support for concurrent features or React 18+ improvements.

fix

Consider alternatives like useReducer-based queues for modern React.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: queue is not iterable

Attempting to iterate over queue before it is initialized (maybe during render before state mount).

fix

Check that queue is an array before using array methods: if (Array.isArray(queue)) { ... }

Warning: React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed.

Calling useQueue conditionally or inside loops, violating Rules of Hooks.

fix

Move useQueue call to the top level of the component, not inside conditionals.

Uncaught ReferenceError: done is not defined

The process function passed to useQueue does not use the done callback parameter.

fix

Define process with a second parameter (done) and invoke it when done: const process = (item, done) => { ... done(); }

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency required for hook usage; must be >=16.

Agent activity

25 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/jonstuebe/use-queue ↗

packageuse-queue ↗

homepagehttps://github.com/jonstuebe/use-queue#readme ↗