usePromise.js

export default function usePromise(api) {
  const [state, dispatch] = useReducer(
    (state, action) => {
      switch (action.type) {
        case 'LOADING':
          return { ...state, loading: true }
        case 'RESOLVED':
          return { ...state, loading: false, response: action.response, error: null }
        case 'ERROR':
          return { ...state, loading: false, response: null, error: action.error }
        default:
          return state
      }
    },
    {
      loading: false,
      response: null,
      error: null,
    }
  )

  useEffect(() => {
    let isCurrent = true
    dispatch({ type: 'LOADING' })
    api()
      .then(response => {
        if (!isCurrent) return
        dispatch({ type: 'RESOLVED', response })
      })
      .catch(error => {
        dispatch({ type: 'ERROR', error })
      })
    return () => (isCurrent = false)
  }, [api])

  return [state.response, state.loading, state.error]
}

/////////////////
// Example usage 
/////////////////

const example = usePromise(
  useCallback(
    () => fetch(...),
    [whatever-dependency-you-want]
  )
)

// Here's an example of if you had a `getProduct` fetching API
const products = usePromise(useCallback(() => api.getProduct(productId), [productId]))