blog_useFetch_generic.ts

// useFetch.ts
import { useState, useEffect, useCallback } from "react";

interface RequestProps<T> {
  url: RequestInfo;
  init?: RequestInit;
  processData?: (data: any) => T;
}

export const useFetch = <T>({ url, init, processData }: RequestProps<T>) => {
  // Response state
  const [data, setData] = useState<T>();

  // ...

  // If no processing function is passed just cast the object to type T
  // The callback hook ensures that the function is only created once
  // and hence the effect hook below doesn't start an infinite loop
  const processJson = useCallback(processData || ((jsonBody: any) => jsonBody as T), []);

  useEffect(() => {
    // ...
  }, [stringifiedUrl, stringifiedInit, processJson]);

  return data;
};