useFetch Pattern O Hook Personalizado useFetch

Última atualização: 2026-11-03

useFetch Pattern O Hook Personalizado useFetch

Extraia a lógica de requisição de três estados para um Hook personalizado useFetch(url): um componente chama uma linha e obtém { data, loading, error }, então o estado da requisição não se espalha mais pelo código. Este é o caso clássico de reutilização de lógica e o degrau para o TanStack Query. Todo componente compartilha o mesmo comportamento bem testado, e a limpeza fica em um só lugar em vez de ser copiada.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

function useFetch(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null })
  useEffect(() => {
    const ctrl = new AbortController()      // cancel the old request when url changes or on unmount
    setState({ data: null, loading: true, error: null })
    fetch(url, { signal: ctrl.signal })
      .then(r => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
      .then(data => setState({ data, loading: false, error: null }))
      .catch(err => err.name !== 'AbortError' &&
        setState({ data: null, loading: false, error: err }))
    return () => ctrl.abort()               // cleanup: stops a stale response from overwriting fresh data
  }, [url])
  return state
}

⚙️ Parâmetros

Retorna：Sem valor de retorno; trata-se de um padrão de codificação, não de uma API chamável.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar em "Trocar para #2" dispara uma nova requisição, mostra o estado de carregamento por um instante e então renderiza o todo correspondente — o componente escreve uma única linha useFetch(url) enquanto toda a lógica de três estados é reutilizada.

💡 Pontos-chave

🏷️ Mais Dados e Engenharia

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós