Se você trabalha com React, provavelmente já se deparou com a necessidade de fazer requisições HTTP dentro dos seus componentes. Mas como evitar requisições desnecessárias que podem impactar a performance do seu app e a experiência do usuário? A resposta pode estar no AbortController!

✨ O AbortController é uma API nativa do Javascript que permite cancelar uma requisição HTTP antes que ela seja finalizada. Isso é extremamente útil em cenários onde o componente que disparou a requisição se torna unmounted (é desmontado/retirado de tela - numa troca de página, por exemplo) antes do retorno da mesma, ou quando queremos evitar múltiplas requisições simultâneas em casos onde apenas a última resposta é relevante.

Como Utilizar o AbortController no React? 🤔

1. Criação do Controller: Dentro do useEffect, crie uma instância do AbortController e passe o signal para a sua requisição fetch.

2. Cancelamento da Requisição: No retorno da função useEffect, chame o método abort() para cancelar a requisição no unmount do componente.

3. Manuseio de Erros: Lembre-se de tratar o erro de "requisição abortada" para evitar mensagens desnecessárias no console.
   

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('https://api.exemplo.com/dados', { signal })
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => {
      if (error.name !== 'AbortError') {
        console.error('Erro na requisição:', error);
      }
    });

  return () => {
    /*
      Cancela a requisição se o componente for unmounted
      (for desmontado/sair da tela)
    */
    controller.abort();
  };
}, []);

💡 Com essa abordagem, você melhora a performance do seu app, evita bugs e garante uma experiência mais fluida para o usuário.

E você? Já utiliza o AbortController nos seus projetos? Compartilhe suas experiências e dicas nos comentários!