Como Usar o AbortController para Cancelar Chamadas de API e Prevenir Vazamentos de Memória no React

Quando estamos desenvolvendo aplicações web modernas com React, um dos cenários que precisamos gerenciar cuidadosamente são as chamadas de API. A gestão adequada dessas chamadas é fundamental para evitar problemas comuns como vazamentos de memória e condições de corrida, especialmente em aplicações SPA (Single Page Application) que fazem muitas atualizações no estado do componente. Neste post, vamos explorar como o AbortController pode ser uma ferramenta essencial para cancelar requisições de API e garantir a estabilidade do seu aplicativo.

O Problema: Vazamentos de Memória e Condições de Corridas (Race Conditions)

Quando um componente React inicia uma chamada de API mas é desmontado antes de receber uma resposta, ele pode causar um vazamento de memória. Isso ocorre porque a chamada de API pode tentar atualizar o estado de um componente que já não está mais em uso. Condições de corrida podem surgir quando várias chamadas de API estão acontecendo ao mesmo tempo e terminam em ordens inesperadas, o que pode levar a estados incoerentes.

A Solução: AbortController

O AbortController é uma funcionalidade da API Fetch que permite abortar uma chamada de API em andamento. Ele é particularmente útil quando combinado com os hooks useState e useEffect do React.

Vejamos um exemplo prático. No código a seguir (mostrado na imagem), fazemos uma chamada de API para buscar informações de um Pokémon usando o fetch junto com um AbortController:

const [data, setData] = useState(null);

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

  const fetchData = async () => {
    try {
      const response = await fetch('https://pokeapi.co/api/v2/pokemon/ditto', { signal });
      const result = await response.json();
      setData(result);
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Fetch error:', error);
      }
    }
  };

  fetchData();

  return () => {
    controller.abort();
  };
}, []);

Por Que Usar o AbortController?

• Cancelamento Explícito: Dá controle sobre as chamadas de API e permite que elas sejam canceladas a qualquer momento.
• Evita Atualizações de Estado Desnecessárias: Previne que um componente desmontado tente atualizar seu estado, o que causaria um vazamento de memória.
• Manuseio de Condições de Corrida: Impede problemas quando múltiplas requisições são enviadas, mas apenas a mais recente é relevante.

Quando Usar Bibliotecas de Gerenciamento de Estado?

Bibliotecas como React Query, RTK Query e SWR oferecem gerenciamento de chamadas de API "out of the box". Elas lidam automaticamente com cancelamentos e outras complicações de chamadas assíncronas. É recomendável usá-las para projetos complexos, pois simplificam o código e trazem eficiência ao gerenciar o estado do servidor no cliente.

Conclusão

Entender como e por que usar o AbortController pode não apenas salvar sua aplicação de vazamentos de memória e condições de corrida, mas também melhorar a experiência do usuário ao garantir que sua UI reaja corretamente às ações do usuário e ao ciclo de vida dos componentes. Com este conhecimento, você pode escrever código React mais limpo, eficiente e confiável.

E aí, está pronto para aplicar essas técnicas ao seu próximo projeto React? Compartilhe suas experiências e dicas nos comentários abaixo!