Encapsula el gancho de solicitud de Hook (useFetch) y usa la señal para eliminar los efectos secundarios de fetch.

1. función encapsulada

import { useEffect, useState ] from "react"
export function useFetch(url) {
    const [loading，setLoading] = useState(true);
    const [data, setData] = useState();
    const [error， setError] = useState()

    useEffect(() => {
        setLoading(true);
        fetch(url)
            .then(setData)
            .catch(setError)
            .finally(() => setLoading(false));
        }, [url]);
    return { loading, data, error }
}

        Haz un paquete muy simple.

1. Avanzado

   1. Pero esto causará un problema, ¿qué pasa si terminamos el método cuando realizamos saltos de enrutamiento y consumimos páginas?
   2. Puede utilizar la señal de fetch y el retorno de useEffect . El código completo es el siguiente:

      import { useEffect, useState ] from "react"
      export function useFetch(url) {
          const [loading，setLoading] = useState(true);
          const [data, setData] = useState();
          const [error， setError] = useState()
      
          useEffect(() => {
              const controller = new AbortController();
              setLoading(true);
              fetch(url, { signal: controller.signal })
                  .then(setData)
                  .catch(setError)
                  .finally(() => setLoading(false));
      
              return () => {
                  controller.abort();
              }
         }, [url]);
          return { loading, data, error }
      }