Registry / productivity / react-use-queue

react-use-queue

library0.5.0jsnpmunverified

A lightweight job-based asynchronous queue hook for React 16.8+ and React Native. v0.5.0 is the current stable release; no regular cadence. Key differentiator: minimal API—add tasks or promises, get a callback on completion. Lacks built-in WebWorker support and automated tests. No dependencies besides React peer dependency.

productivity

npm install react-use-queue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-USE-QUEUE

react-use-queue

productivityjavascriptv0.5.0

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 'react-use-queue';

✗ import { useQueue } from 'react-use-queue';

Default export; named import will not work.

returned queue object

✓ const Queue = useQueue();

✗ const { useQueue } = require('react-use-queue'); const Queue = useQueue();

ESM-only; CommonJS require with destructuring will fail.

TypeScript types

✓ import useQueue from 'react-use-queue';

Library ships TypeScript definitions; no extra type import needed.

Shows basic usage: import the hook, create a queue, add tasks (sync and async), and listen for completion.

import React from 'react'; import useQueue from 'react-use-queue'; function App() { const Queue = useQueue(); const handleClick = () => { Queue.addJob({ task: () => console.log('Task executed'), }); Queue.addJob({ task: () => new Promise(resolve => { setTimeout(() => { console.log('Async task done'); resolve(); }, 1000); }), }); Queue.onComplete(() => { console.log('All tasks complete'); }); }; return <button onClick={handleClick}>Start Queue</button>; } export default App;

Debug

Known issues

breakingVersion 0.5.0 changed 'addJob' to accept both objects with 'task' key and bare callback functions.

fix

Ensure 'addJob' argument is either { task: () => ... } or a function directly, per v0.5.0 API.

affects: <0.5.0

gotchauseQueue is a default export, not named.

fix

Use 'import useQueue from ...' not 'import { useQueue } from ...' or 'require("react-use-queue").useQueue'.

affects: >=0.0.0

gotchaQueue methods are not properly typed in some versions; TypeScript may show 'any' type.

fix

Consider wrapping calls or add explicit types as needed.

affects: <=0.5.0

gotchaNo built-in concurrency control; all tasks run sequentially in order added.

fix

If parallel execution is needed, implement custom queue or use alternative library.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: useQueue is not a function

Importing as named export instead of default.

fix

Replace 'import { useQueue } from "react-use-queue"' with 'import useQueue from "react-use-queue"'.

TypeError: Cannot destructure property 'addJob' of 'useQueue(...)' as it is undefined.

Calling useQueue incorrectly or React version mismatch (needs React 16.8+).

fix

Ensure React 16.8+, and use 'const Queue = useQueue();' then 'Queue.addJob(...)'.

Module not found: Can't resolve 'react-use-queue'

Package not installed or missing from package.json.

fix

Run 'npm i react-use-queue' and restart dev server.

Warning: React hook 'useState' is called in function 'useQueue' that is neither a React function component nor a custom React Hook function.

Using useQueue outside of a React component or custom hook.

fix

Only call useQueue from a React component or custom hook (see Rules of Hooks).

Upgrade

Version history

0.5.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

26 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/baughmann/react-use-queue ↗

packagereact-use-queue ↗

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