useAsync.js

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

export default (asyncFunction, immediate = true) => {
  const [isLoading, setIsLoading] = useState(false)
  const [value, setValue] = useState(null)
  const [error, setError] = useState(null)

  const execute = useCallback(
    async (params = {}, config = {}) => {
      setIsLoading(true)
      setValue(null)
      setError(null)
      console.log('useAsync: BEFORE REQUEST: UPLOAD')
      try {
        const res = await asyncFunction(params, config)
        console.log('useAsync: RESPONSE SUCCESS:', res)
        setValue(res?.data)
      } catch (err) {
        console.error('useAsync: RESPONSE ERROR:', JSON.stringify(err), err)
        setError(err)
      } finally {
        console.log('useAsync: FINALLY: UPLOAD')
        setIsLoading(false)
      }
    },
    [asyncFunction]
  )

  useEffect(() => {
    if (immediate) {
      execute()
    }
  }, [execute, immediate])

  return { execute, isLoading, value, error }
}