useAsync() ↔ async Custom Hook to return value, error, status of Data Fetch

export default function useAsync(asyncFn, immediate=true) {
  const [status, setStatus] = useState("idle")
  const [value, setValue] = useState(null)
  const [error, setError] = useState(null)
  
  const execute = useCallback(() => {
    setStatus("pending")
    setValue(null)
    setError(null)
    
    return asyncFn()
      .then(res => {
        setValue(res)
        setStatus("success")
      })
      .catch(err => {
        setError(err)
        setStatus("error")
      })
  }, [asyncFn])
  
  useEffect(() => {
    if(immediate) execute()
  }, [execute, immediate])
  
  return { execute, status, value, error}
}

References