useResource.js

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

const initialState = {
  isLoading: false,
  result: null,
  error: null
};

/**
 * This could probably be done in a much better way. Seems really messy
 */
export default function(initialCall, fetchInitially = false) {
  const [resourceCall, updateCall] = useState(initialCall);
  const [shouldFetch, setShouldFetch] = useState(fetchInitially);
  const [resource, setResource] = useState({ ...initialState, isLoading: fetchInitially });

  const fetchData = useCallback(() => {
    async function fetch() {
      setShouldFetch(false);
      setResource({
        isLoading: true,
        result: null,
        error: null
      });
      try {
        setResource({
          isLoading: false,
          result: await resourceCall(),
          error: null
        });
      } catch (error) {
        setResource({
          isLoading: false,
          result: null,
          error
        });
      }
    }
    fetch();
  }, [resourceCall]);

  useEffect(() => {
    if (!shouldFetch) return;
    fetchData();
  }, [shouldFetch, fetchData]);

  return useMemo(
    () => ({
      resource,
      fetchData,
      updateCall
    }),
    [resource, fetchData]
  );
}