𝗘𝘃𝗶𝘁𝗲 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝘀 𝗰𝗼𝗺 𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿𝘀
Os usuários se movem rápido em aplicações web. Essa velocidade cria dois problemas principais para os desenvolvedores.
O primeiro problema é a armadilha do componente desmontado (unmounted component). Um usuário clica em um botão para buscar dados. A requisição leva quatro segundos. Após dois segundos, o usuário clica em voltar e sai da página. A requisição continua em segundo plano. Quando os dados chegam, o código tenta atualizar um componente que não existe mais. Isso causa vazamentos de memória (memory leaks).
O segundo problema é a race condition. Isso acontece frequentemente em barras de pesquisa.
- Um usuário digita "A". A Requisição 1 começa.
- Um usuário digita "AB". A Requisição 2 começa.
- A Requisição 2 termina primeiro e mostra os dados corretos.
- A Requisição 1 termina com atraso e sobrescreve a tela com dados antigos.
Você resolve ambos os problemas com a API AbortController. Esta ferramenta permite interromper uma requisição de rede quando ela não é mais necessária.
Como implementar:
- Crie um novo AbortController dentro do seu useEffect.
- Passe o sinal do controller para a sua requisição fetch.
- Use um bloco try/catch para tratar o erro.
- Verifique se o nome do erro é AbortError para ignorar cancelamentos intencionais.
- Retorne uma função de limpeza no seu useEffect para chamar controller.abort().
Este padrão funciona quando um componente é desmontado ou quando uma dependência muda.
Benefícios desta abordagem:
- Você impede que dados desatualizados sobrescrevam dados novos.
- Você evita vazamentos de memória em seu app React.
- Você libera conexões de rede do navegador.
- Sua aplicação permanece previsível e estável.
Fonte: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899