Function useFetch

packages/react/src/utils/useFetch.ts:20–99

(
  fetch: FetchEsque,
  url?: string,
  options?: RequestInit,
)

  | { type: "error"; payload: Error };

function useFetch<T = unknown>(
  fetch: FetchEsque,
  url?: string,
  options?: RequestInit,
): State<T> {
  const cache = useRef<Cache<T>>({});

  // Used to prevent state update if the component is unmounted
  const cancelRequest = useRef<boolean>(false);

  const initialState: State<T> = {
    error: undefined,
    data: undefined,
  };

  // Keep state logic separated
  const fetchReducer = (state: State<T>, action: Action<T>): State<T> => {
    switch (action.type) {
      case "loading":
        return { ...initialState };
      case "fetched":
        return { ...initialState, data: action.payload };
      case "error":
        return { ...initialState, error: action.payload };
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(fetchReducer, initialState);

  useEffect(() => {
    // Do nothing if the url is not given
    if (!url) return;

    cancelRequest.current = false;

    const fetchData = async () => {
      dispatch({ type: "loading" });

      // If a cache exists for this url, return it
      if (cache.current[url]) {
        dispatch({ type: "fetched", payload: cache.current[url] });
        return;
      }

      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(response.statusText);
        }

        const dataOrError = await safeParseJSON<T>(response);
        if (dataOrError instanceof Error) {
          throw dataOrError;
        }

        cache.current[url] = dataOrError;