https://github.com/sandinmyjoints/use-async-queue

React Hook implementing a queue with optional concurrency limit.
https://github.com/sandinmyjoints/use-async-queue

async-queue concurrency hooks node-module npm-package queue react

Last synced: about 1 month ago
JSON representation

React Hook implementing a queue with optional concurrency limit.

• Host: GitHub
• URL: https://github.com/sandinmyjoints/use-async-queue
• Owner: sandinmyjoints
• Created: 2020-04-22T12:33:10.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-08-05T16:40:07.000Z (5 months ago)
• Last Synced: 2024-10-06T22:03:42.721Z (3 months ago)
• Topics: async-queue, concurrency, hooks, node-module, npm-package, queue, react
• Language: JavaScript
• Homepage:
• Size: 804 KB
• Stars: 16
• Watchers: 2
• Forks: 6
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# use-async-queue

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

concurrency limit.

Inspired by

[@caolan/async.queue](http://caolan.github.io/async/docs.html#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**

```javascript

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

- [x] return numInFlight, numRemaining, numDone

- [x] catch

- [x] pending/inflight

- [x] inflight callback

- [x] drain callback

- [ ] timeouts

- [ ] start, stop methods

- [ ] use events instead of/in addition to callbacks