Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProRun an async function and get its status, data and error, where only the latest call may update state, and nothing updates after unmount.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a button-driven request, a lookup on demand or a one-off load where you want idle, pending, success and error states without a data library.
Do not use it for cached, shared or revalidated server data, which a data library (TanStack Query, SWR) handles better.
import { useAsync } from "@/hooks/use-async"const { run, status, data, error } = useAsync((id: string) => fetchUser(id))
<button onClick={() => run("42")} disabled={status === "pending"}>Load</button>useAsync<A extends unknown[], R>(fn: (...args: A) => Promise<R>): { run, status, data, error, reset }
| Return | Description |
|---|---|
run | Call it with the arguments of fn. Returns a promise of the result; rejection is caught and stored, so it resolves undefined on error. |
status | "idle" | "pending" | "success" | "error". |
data | The latest successful result. Kept while a new call is pending. |
error | The error of the latest call, or null. |
reset | Back to idle and ignore any call still in flight. |
If run is called again before the first call finishes, the first result is ignored (latest call wins). Results that arrive after unmount are ignored.
Expose progress and failure in text: put aria-busy on the region while pending, show errors in role="alert" and success in role="status", and keep focus where the person started the action.
The hook ships with renderHook tests (use-async.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.