DEMO

useAsyncCallback

Returns a current execution state of an async function, Use it to orchestrate async actions in UI.

Usage

import { useCallback } from 'react'
import { useAsyncCallback } from '@react-hooks-library/core'

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

function Demo() {
  const fn = useCallback(async () => {
    await sleep(3000)
    return 5000
  }, [])

  const [fnState, fnCallback] = useAsyncCallback(fn)

  return (
    <div>
      {fnState.isLoading ? <div>Loading...</div> : null}

      {fnState.error ? <div>An Error Occurred</div> : null}

      {fnState.data ? <div>{fnState.data}</div> : null}

      <button onClick={fnCallback}>Call Function</button>
    </div>
  )
}

Type Declarations

declare type UseAsyncState<T> = {
  data: T | undefined
  error: boolean
  isSuccess: boolean
  isLoading: boolean
}
/**
 * Returns a current execution state of an async function.
 * Use it to orchestrate async actions in UI.
 *
 * @see https://react-hooks-library.vercel.app/core/useAsyncCallback
 */
declare function useAsyncCallback<Args extends unknown[], ResolvedType>(
  callback: (...args: Args) => Promise<ResolvedType>
): [UseAsyncState<ResolvedType>, (...args: Args) => Promise<ResolvedType>]

Source

Source | Demo | Docs