Escapando da Armadilha: Corrigindo Stale Closures em React Hooks
Stale closures causam perda silenciosa de dados no React.
Você constrói um dashboard com um timer em segundo plano. Você usa o setInterval dentro de um hook useEffect para salvar dados automaticamente a cada 5 segundos.
O bug acontece quando o intervalo é disparado. Ele salva um documento vazio, mesmo que o usuário tenha digitado uma página inteira. O intervalo fica preso no passado. Ele utiliza uma versão antiga do seu estado.
O Problema
Quando o useEffect é executado, ele captura as variáveis em seu escopo.
- Se você deixar o estado fora do array de dependências, o intervalo usará o estado do primeiro render.
- Se você adicionar o estado ao array de dependências, o React reiniciará o intervalo a cada tecla digitada. Isso acaba com a performance e quebra o seu timing.
A Solução: O Padrão Mutable Ref
Você deve separar o timer dos dados. Use o hook useRef para manter uma referência constante ao seu estado mais recente. Isso evita re-renders e mantém seu intervalo estável.
Como implementar:
- Crie uma ref para armazenar seu estado mais recente.
- Use um
useEffectpara atualizar essa ref sempre que seu estado mudar. - Inicie seu intervalo com um array de dependências vazio para que ele seja executado apenas uma vez.
- Acesse a ref dentro do callback do seu intervalo.
Este método garante que suas tarefas em segundo plano sempre utilizem dados atualizados. Isso mantém sua UI rápida e seus dados seguros.
Fonte: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7