react-async-usefetch/src/index.js

Simple useFetch hook

/**
 * @author Vipin Kumar
 * @summary  Simple usefetch Hook
 * @description Simple usefetch Hook
 * @public
 */


import { useState, useEffect, useRef } from "react";

async function responseToJSON(rawData) {
  return await rawData.json();
}

function addDelay(callbackFn, delay) {
  const fnCallback = useRef();

  useEffect(() => {
    fnCallback.current = callbackFn;
  });

  useEffect(() => {
    function magic() {
      fnCallback.current();
    }
    if (delay) {
      let id = setInterval(magic, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

export default function useFetch({
  url,
  options,
  delay=0,
  returnDict = ["response", "error", "isLoading", "rawResponse"],
  fetchFn = window.fetch,
  parseFn = responseToJSON
}) {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [rawresponse, setRawResponse] = useState(null);

  async function sendRequest() {
    try {
      const rewData = await fetchFn(url, options);
      const res = await parseFn(rewData);
      setResponse(res);
      setRawResponse(rewData);
      setIsLoading(false);
    } catch (error) {
      setError(error);
      setIsLoading(false);
    }
  }
  
  useEffect(() => {
    sendRequest();
  }, [url]);

  addDelay(sendRequest, delay);

  return { [returnDict[0]]:response, [returnDict[1]]:isLoading, [returnDict[2]]:error, requestData:sendRequest, [returnDict[3]]:rawresponse };
}