Accept items to run tasks on.

Author: sandinmyjoints

component.jsx

@@ -14,7 +14,7 @@ const makeTask = (id, delay) => {
   };
 };
 
-export const Component = () => {
+export const Component = ({ items }) => {
   const [doneItems, setDoneItems] = useState([]);
 
   const done = (d) => {
@@ -24,10 +24,8 @@ export const Component = () => {
   const { add, stats } = useAsyncQueue({ concurrency: 2, done });
 
   useEffect(() => {
-    add(makeTask(1, 100));
-    add(makeTask(2, 200));
-    add(makeTask(3, 300));
-  }, [add]);
+    items.forEach((item) => add(makeTask(item.id, item.delay)));
+  }, [items, add]);
   const { numPending, numInFlight, numDone } = stats;
 
   return (

use-async-queue.test.jsx

@@ -300,9 +300,18 @@ describe("useAsyncQueue", () => {
 
   describe("on mount", () => {
     it("should execute each task once", async () => {
-      render(<Component />, {
-        wrapper: StrictMode,
-      });
+      render(
+        <Component
+          items={[
+            { id: 1, delay: 100 },
+            { id: 2, delay: 200 },
+            { id: 3, delay: 300 },
+          ]}
+        />,
+        {
+          wrapper: StrictMode,
+        }
+      );
 
       expect(screen.getByText("total: 3"));
       await waitFor(() => {