4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 50:T169a,import { useCallback, useEffect, useRef, useState } from "react"; export type AsyncStatus = "idle" | "pending" | "success" | "error"; /** * Discriminated union for every possible state of an async operation. * Narrow on `status` (or the boolean flags) to get typed `data` / `error` access. */ export type AsyncState = | { status: "idle"; data: undefined; error: undefined; isIdle: true; isLoading: false; isSuccess: false; isError: false; } | { status: "pending"; data: TData | undefined; // preserves previous data while refetching error: undefined; isIdle: false; isLoading: true; isSuccess: false; isError: false; } | { status: "success"; data: TData; error: undefined; isIdle: false; isLoading: false; isSuccess: true; isError: false; } | { status: "error"; data: undefined; error: TError; isIdle: false; isLoading: false; isSuccess: false; isError: true; }; export type UseAsyncOptions = { /** The async function to run. Receives the same args passed to `execute`. */ action: (...args: TArgs) => Promise | TData; /** Called with the resolved value and original args on success. */ onSuccess?: (data: TData, args: TArgs) => void; /** Called with the thrown error and original args on failure. */ onError?: (error: TError, args: TArgs) => void; /** Called after every settled attempt regardless of outcome. */ onSettled?: ( data: TData | undefined, error: TError | undefined, args: TArgs, ) => void; }; export type UseAsyncReturn = AsyncState< TData, TError > & { /** * Run the action and await the result , even though side effect can be dispatch with onError , * but it will **Reject on failure** for imperative error handling * Use when the next step depends on the outcome (sequencing , guarded , navigation) or your own * try/catch , Mirrors Tanstack `mutateAsync` */ executeAsync: (...args: TArgs) => Promise; /** * Fire and Forget , **It never reject** , error handling can be listen declaratively with * sideEfect with onError * Use when the action is the end of the story (e.g a button that just shows success/error). * Mirror Tanstack `mutate` */ execute: (...args: TArgs) => void; reset: () => void; }; const IDLE_STATE = { status: "idle", data: undefined, error: undefined, isIdle: true, isLoading: false, isSuccess: false, isError: false, } as const; /** * Wraps an async function with loading, success, and error state. * * - Stale responses are dropped — only the most-recent `execute` call can commit * state. Calling `execute` again while in-flight silently cancels the earlier one. * - Callbacks are always fresh; no stale-closure risk without wrapping in `useCallback`. * - `reset` cancels any in-flight request and returns to the `idle` state. */ export function useAsync< TData = unknown, TError = unknown, TArgs extends unknown[] = [], >( options: UseAsyncOptions, ): UseAsyncReturn { const [state, setState] = useState>(IDLE_STATE); // always fresh callbacks without forcing execute to change identity (deps array) const optionsRef = useRef(options); useEffect(() => { optionsRef.current = options; }); // latest wins , stale response will dropped const requestIdRef = useRef(0); // prevent setState after mounted const mountedRef = useRef(true); useEffect(() => { mountedRef.current = true; return () => { mountedRef.current = false; }; }, []); const executeAsync = useCallback(async (...args: TArgs): Promise => { // Tăng trước khi đọc const requestId = ++requestIdRef.current; const { action, onSuccess, onError, onSettled } = optionsRef.current; setState((prev) => ({ status: "pending", data: prev.data, error: undefined, isIdle: false, isLoading: true, isSuccess: false, isError: false, })); try { const data = await action(...args); if (requestId === requestIdRef.current && mountedRef.current) { // commit state only on the latest && component still mounted setState({ status: "success", data, error: undefined, isIdle: false, isLoading: false, isSuccess: true, isError: false, }); onSuccess?.(data, args); onSettled?.(data, undefined, args); } return data; } catch (err) { const error = err as TError; if (requestId === requestIdRef.current && mountedRef.current) { setState({ status: "error", data: undefined, error, isIdle: false, isLoading: false, isSuccess: false, isError: true, }); onError?.(error, args); onSettled?.(undefined, error, args); } throw err; } }, []); const execute = useCallback(async (...args: TArgs) => { // Fire-and-forget: errors are already committed to state and passed to // onError inside executeAsync, so we swallow the rejection here to spare // callers from having to .catch. This is what makes execute "never reject". try { const data = await executeAsync(...args); return data; } catch {} }, []); const reset = useCallback(() => { requestIdRef.current++; if (mountedRef.current) { setState(IDLE_STATE); } }, []); return { ...state, execute, executeAsync, reset }; } 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4d",null,{"registryDependencies":[]}]]}],["$","$L4e",null,{"sourceUrl":"https://kaui-shadcn-registry.vercel.app/r/use-async.json","proxyUrl":"https://shadcnregistry.com/r/kaui/use-async","itemId":"@kaui/use-async"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"src/registry/base/use-async/hooks/use-async.ts","content":"$50","type":"registry:hook","target":"hooks/use-async.ts"}]}]]}],"$L51"]}]

Use Async

Installation

Files

hooks

Styles