use-operations

A React hook for managing multiple async operations with independent isPending states.
Think of it as multi-useTransition.

🚀 Install

npm install use-operations
import React from "react";
import { useOperations } from "use-operations";

enum Op {
  Save,
  Delete,
  Sync,
}

export default function App() {
  const ops = useOperations<Op>([Op.Save, Op.Delete, Op.Sync]);

  const handleSave = () =>
    ops[Op.Save].run(async () => {
      await new Promise((r) => setTimeout(r, 1000));
      console.log("Saved!");
    });

  const handleDelete = () =>
    ops[Op.Delete].run(async () => {
      await new Promise((r) => setTimeout(r, 1500));
      console.log("Deleted!");
    });

  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <button onClick={handleSave} disabled={ops[Op.Save].isPending}>
        {ops[Op.Save].isPending ? "Saving…" : "Save"}
      </button>

      <button onClick={handleDelete} disabled={ops[Op.Delete].isPending}>
        {ops[Op.Delete].isPending ? "Deleting…" : "Delete"}
      </button>
    </div>
  );
}