useQuery.js

import { useState, useEffect, useRef, useMemo } from 'react';

export const useQuery = () => {
  const abortCtrl = useMemo(() => new AbortController(), [])
        // a priori
      , url = useRef("")
      , opt = useRef({})

  const [res, setRes] = useState(null)
      , [err, setErr] = useState(null)
      , [isPending, setIsPending] = useState(false)

  const run = ({ onOk, onErr, onFin }) => {
    setIsPending(true)
    // reseteo por si re-utilizo el hook
    setRes(null)
    setErr(null)

    const options = Object.assign({ signal: abortCtrl.signal }, opt.current)

    fetch(url.current, options)
      .then(async res => {
        if (!res.ok) throw await res.json();
        return await res.json();
      })
      .then(data => {
        if (typeof(onOk) === "function") onOk(data);
        setRes(data)
      })
      .catch(e => {
        if (e.name === "AbortError") return;
        setErr(true)
        setRes(e)
        if (typeof(onErr) === "function") onErr(e);
      })
      .finally(() => {
        setIsPending(false)
        if (typeof(onFin) === "function") onFin();
      })
  }

  useEffect(() => {
    return () => abortCtrl.abort() // cleanup func
  // eslint-disable-next-line
  }, [])

  return { url, opt, run, res, err, isPending }
}