useAsync.ts

useAsync.ts

import { useCallback, useEffect, useState } from 'react'

// borrowed from https://usehooks.com/useAsync/
export function useAsync<T>(asyncFunction: () => Promise<T>, immediate = true) {
  const [loading, setLoading] = useState(true)
  const [value, setValue] = useState<T | null>(null)
  const [error, setError] = useState<any>(null)
  // The execute function wraps asyncFunction and
  // handles setting state for pending, value, and error.
  // useCallback ensures the below useEffect is not called
  // on every render, but only if asyncFunction changes.
  const execute = useCallback(async () => {
    setValue(null)
    setError(null)
    try {
      const response = await asyncFunction()
      setValue(response)
      return response
    } catch (error) {
      setError(error)
    } finally {
      setLoading(false)
    }
  }, [asyncFunction])
  // Call execute if we want to fire it right away.
  // Otherwise execute can be called later, such as
  // in an onClick handler.
  useEffect(() => {
    if (immediate) {
      void execute()
    }
  }, [execute, immediate])
  return { execute, loading, value, error }
}