use-async-data.js

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

export const IDLE = 'IDLE'
export const LOADING = 'LOADING'
export const SUCCESS = 'SUCCESS'
export const ERROR = 'ERROR'

export function useAsyncData(fetchFn, deps) {
  const stableFetchFn = useCallback(fetchFn, deps)
  const [{ state, data, error }, setState] = useState({ state: IDLE })

  useEffect(() => {
    let active = true

    setState(prev => ({ ...prev, state: LOADING }))
    
    stableFetchFn().then(
      data => active && setState({ state: SUCCESS, data }),
      error => active && setState({ state: ERROR, error }),
    )
    
    return () => (active = false)
  }, [stableFetchFn])

  return { state, data, error }
}