Encapsule o gancho de solicitação do Hook (useFetch) e use o sinal para eliminar os efeitos colaterais da busca

1. função 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 }
}

        Faça um pacote bem simples.

1. Avançado

   1. Mas isso causará um problema, e se encerrarmos o método quando realizarmos saltos de roteamento e consumirmos páginas.
   2. Você pode usar o sinal de fetch e o retorno de useEffect . O código completo é o seguinte:

      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 }
      }