Simple wrapper for useEffect and useState hook to execute and store results of async operations.

useAsyncResource.ts

import { useEffect, useState } from 'react'

export function useAsyncResource<T>(fetchResource: () => Promise<T>) {
  const [data, setData] = useState<T>()
  const [error, setError] = useState<any>()

  useEffect(function getResource() {
    fetchResource()
      .then(setData)
      .catch(setError)
  }, [fetchResource])

  return {
    data,
    error,
  }
}