AbortController: gerenciando memória de forma eficiente no React

Em aplicações React modernas é essencial gerenciar memória de forma eficiente para garantir uma boa performance. Um problema comum que devs enfrentam são memory leaks que ocorrem durante operações assíncronas de fetch.

O AbortController é um utilitário poderoso que ajuda a mitigar esses vazamentos.

O problema

Quando um componente faz uma requisição assíncrona e é desmontado antes da resposta chegar, o setState da promessa que ainda está rodando pode causar erros e segurar referências em memória. Resultado: memory leak e warnings no console.

A solução: AbortController

O AbortController permite cancelar requisições fetch em andamento. Combinado com o cleanup do useEffect, você cancela a requisição quando o componente desmonta.

import React, { useState, useEffect } from 'react';

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

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

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        const data = await response.json();

        if (!signal.aborted) {
          setData(data);
        }
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('Fetch error:', error);
        }
      }
    };

    fetchData();

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

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
};

Como funciona

1. Criamos uma instância de AbortController e pegamos seu signal.
2. Passamos o signal para o fetch via segundo argumento.
3. No cleanup do useEffect, chamamos controller.abort().
4. O fetch é interrompido, lançando um AbortError que tratamos no catch.

Conclusão

Incorporar o AbortController no seu projeto React ajuda a gerenciar operações assíncronas com eficiência, evitar memory leaks e garantir uma experiência mais estável para o usuário.

Saiba mais na MDN — AbortController.