Skip to content
aq-ui
Back to HooksHook

Use Async

Open-code aq-ui React hook for Use Async.

Installation

pnpm dlx aq-ui@alpha add use-async

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { useAsync } from "@/hooks/use-async"

export function ProfileButton() {
  const profile = useAsync(
    async (signal: AbortSignal, id: string) => {
      const response = await fetch(`/api/profiles/${id}`, { signal })
      if (!response.ok) throw new Error("Could not load profile")
      return response.json() as Promise<{ name: string }>
    }
  )

  return (
    <button
      type="button"
      disabled={profile.status === "pending"}
      onClick={() => void profile.execute("42")}
    >
      {profile.status === "pending" ? "Loading…" : "Load profile"}
    </button>
  )
}

AsyncControls

interfaceSource L21

Type contract for AsyncControls.

interface AsyncControls<T, TArgs extends unknown[]> extends AsyncState<T>

Members

NameType
execute(...args: TArgs) => Promise<T | undefined>
cancel() => void
reset() => void
statusAsyncStatus
dataT | undefined
errorunknown

AsyncState

interfaceSource L9

Type contract for AsyncState.

interface AsyncState<T>

Members

NameType
statusAsyncStatus
dataT | undefined
errorunknown

AsyncStatus

typeSource L7

Type contract for AsyncStatus.

type AsyncStatus = "idle" | "pending" | "success" | "error"

useAsync

functionSource L30

Open-code aq-ui React hook for Use Async.

function useAsync<T, TArgs extends unknown[] = []>(task: (signal: AbortSignal, ...args: TArgs) => Promise<T>, { initialData, immediate = false, initialArgs, }: UseAsyncOptions<T, TArgs> = {}): AsyncControls<T, TArgs>
Returns
AsyncControls<T, TArgs>

Parameters

NameTypeDefault
task(signal: AbortSignal, ...args: TArgs) => Promise<T>—
options?UseAsyncOptions<T, TArgs>{}

UseAsyncOptions

interfaceSource L15

Type contract for UseAsyncOptions.

interface UseAsyncOptions<T, TArgs extends unknown[]>

Members

NameTypeDefault
initialData?T—
immediate?booleanfalse
initialArgs?TArgs—

Registry dependencies

use-latest

Files

  • hooks/use-async.ts

Source