Custom hook that implements a queue to execute functions
npm install use-execution-queue
yarn add use-execution-queue
import * as React from "react";
import { useExecutionQueue } from "use-execution-queue";
const Example = () => {
const [text, setText] = React.useState("Test");
const [asyncItems, setAsyncItems] = React.useState([]);
const { addToQueue } = useExecutionQueue();
return (
<div>
<ul>
{asyncItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
<input value={text} onChange={(e) => setText(e.target.value)} />
<button
onClick={() => {
addToQueue(() => {
setAsyncItems((previousItems) => [...previousItems, text]);
});
}}
>
Add Using Queue
</button>
</div>
);
};
MIT © lucasfloriani
This hook is created using create-react-hook.