React hook arguments cause infinite rerendering

The problem is passing an object literal as options will cause the dependencies of your useEffect() to change every time the hook re-renders, meaning that, as you experienced, you'll be fetching repeatedly because the effect will run again with the new options reference every time the previous fetch has just completed.

In order to break the cycle, you'll need to either

• memoize the options you pass in from useAPICall()
• store your options in a useRef() within useFetch()

Additionally, since you want the fetch to be sensitive to options changing, if you decide on the second approach, you'll need to manually compare the new reference to the previous one each time the useFetch() hook renders, and only use the new reference if the value has changed.

Here's how you can implement the first approach in useAPICall(), leaving useFetch() alone:

export const useAPICall = <T>(url: string, body?: any, method = 'GET') => {
  const options = {
    method,
    body,
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      'x-access-token': getCookie('token'),
    },
  };
  const ref = useRef(options);

  if (
    ref.current.method !== options.method
    || ref.current.body !== options.body
    || ref.current.headers['x-access-token'] !== options.headers['x-access-token']
  ) {
    ref.current = options;
  }

  return useFetch<T>(
    apiEndpoint + url,
    ref.current,
    false
  );
};

Below is how you can implement most of the second approach, leaving useAPICall() alone, though I've left a comment where you'll need to flesh out the specifics of it:

interface State<T> {
  status: 'idle' | 'pending' | 'error' | 'success';
  data?: T;
  error?: string;
}

interface Cache<T> {
  [url: string]: T;
}

type Action<T> =
  | { type: 'request' }
  | { type: 'success'; payload: T }
  | { type: 'failure'; payload: string };

const initialState: State<any> = {
  status: 'idle',
  data: undefined,
  error: undefined,
};

function fetchReducer<T>(state: State<T>, action: Action<T>): State<T> {
  switch (action.type) {
    case 'request':
      return { ...initialState, status: 'pending' };
    case 'success':
      return { ...initialState, status: 'success', data: action.payload };
    case 'failure':
      return { ...initialState, status: 'error', error: action.payload };
    default:
      return state;
  }
};

// if (prev == next) { return prev; } else { return next; }
function headersReducer(prev?: HeadersInit, next?: HeadersInit) {
  if (prev === next) {
    return prev;
  }

  if (!prev || !next) {
    return next;
  }

  if (
    // headers are equal
  ) {
    return prev;
  }

  return next;
}

// if (prev == next) { return prev; } else { return next; }
function optionsReducer(prev?: RequestInit, next?: RequestInit) {
  if (prev === next) {
    return prev;
  }

  if (!prev || !next) {
    return next;
  }

  if (
    prev.body === next.body
    && prev.cache === next.cache
    && prev.credentials === next.credentials
    && prev.headers === headersReducer(prev.headers, next.headers)
    && prev.integrity === next.integrity
    && prev.keepalive === next.keepalive
    && prev.method === next.method
    && prev.mode === next.mode
    && prev.redirect === next.redirect
    && prev.referrer === next.referrer
    && prev.referrerPolicy === next.referrerPolicy
    && prev.signal === next.signal
    && prev.window === next.window
  ) {
    return prev;
  }

  return next;
}

export function useFetch<T = unknown>(
  url: string,
  options?: RequestInit,
  cached = false
): State<T> {
  const cache = useRef<Cache<T>>({});
  const optionsRef = useRef<RequestInit>();
  const [state, dispatch] = useReducer(fetchReducer, initialState);

  optionsRef.current = optionsReducer(optionsRef.current, options);
  const currentOptions = optionsRef.current;

  useEffect(() => {
    let cancelRequest = false;

    const fetchData = async () => {
      dispatch({ type: 'request' });

      if (cache.current[url] && cached) {
        dispatch({ type: 'success', payload: cache.current[url] });
      } else {
        try {
          const res = await fetch(url, currentOptions);
          const json = await res.json();
          cache.current[url] = json;

          if (cancelRequest) return;

          if (res.status !== 200) {
            dispatch({ type: 'failure', payload: json.error });
          } else {
            dispatch({ type: 'success', payload: json });
          }
        } catch (error) {
          if (cancelRequest) return;

          dispatch({ type: 'failure', payload: error.message });
        }
      }
    };

    fetchData();

    return () => {
      cancelRequest = true;
    };
  }, [url, currentOptions, cached]);

  return state;
}

export default useFetch;