useFetch hook for react.

fetch.hook.ts

import { DependencyList, useEffect, useReducer, useState } from "react";

interface State<T> {
  data: T | null;
  error: unknown | null;
  loading: boolean;
  loaded: boolean;
}

type Action<T> =
  | { type: "FETCH_INIT" }
  | { type: "FETCH_SUCCESS"; payload: T }
  | { type: "FETCH_FAILURE"; payload: unknown };

const initialState = {
  data: null,
  loading: true,
  loaded: false,
  error: null,
};

export function useFetch<T>(input: RequestInfo, init?: RequestInit): State<T> {
  const [state, dispatch] = useReducer<
    (state: State<T>, action: Action<T>) => State<T>
  >(reducer, initialState);

  useEffect(() => {
    const abortController = new AbortController();

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

      try {
        const res = await fetch(input, {
          ...init,
          signal: abortController.signal,
        });

        const data = await res.json();

        dispatch({ type: "FETCH_SUCCESS", payload: data });
      } catch (e: any) {
        if (e.name === "AbortError") return;

        dispatch({ type: "FETCH_FAILURE", payload: e });
      }
    };

    fetchData();

    return () => {
      abortController.abort();
    };
  }, [input, init]);

  return state;
}

function reducer<T>(state: State<T>, action: Action<T>): State<T> {
  switch (action.type) {
    case "FETCH_INIT":
      return { ...state, loading: true };
    case "FETCH_SUCCESS":
      return { ...state, loading: false, loaded: true, data: action.payload };
    case "FETCH_FAILURE":
      return { ...state, loading: false, loaded: true, error: action.payload };
    default:
      return state;
  }
}