use-async-queue

A React Hook implementing a queue for sync or async tasks, with optional concurrency limit.

Usage no npm install needed!

<script type="module">
  import useAsyncQueue from 'https://cdn.skypack.dev/use-async-queue';
</script>

README

use-async-queue

A React Hook implementing a queue for sync or async tasks, with optional concurrency limit.

Inspired by @caolan/async.queue.

Usage

  • Create a queue with some concurrency. Default concurrency is 8. Set to Infinity or less than 1 for no concurrency limit.
  • Register for notifications as tasks are processed and finished.
  • Add tasks to it. A task is an object with an id (some unique value that makes sense for your use case -- a number, a url, etc.) and a task (a function that returns a Promise).
  • Demo: https://codesandbox.io/s/use-async-queue-demo-53y89**
import useAsyncQueue from 'use-async-queue';

// Example shows a task fetching a url, but a task can be any operation.
const url = 'some url';

const inflight = task => {
  console.log(`starting ${task.id}`);
  console.dir(stats); // { numPending: 0, numInFlight: 1, numDone: 0}
};

const done = async task => {
  const result = await task.result;
  console.log(`finished ${task.id}: ${result}`);
  console.dir(stats); // { numPending: 0, numInFlight: 0, numDone: 1}
};

const drain = () => {
  console.log('all done');
  console.dir(stats); // { numPending: 0, numInFlight: 0, numDone: 1}
};

const { add, stats } = useAsyncQueue({
  concurrency: 1,
  inflight,
  done,
  drain,
});

add({
  id: url,
  task: () => {
    return fetch(url).then(res => res.text());
  },
});
console.dir(stats); // { numPending: 1, numInFlight: 0, numDone: 0}

TODO

  • return numInFlight, numRemaining, numDone
  • catch
  • pending/inflight
  • inflight callback
  • drain callback
  • timeouts
  • start, stop methods
  • use events instead of/in addition to callbacks