Dia 5 Aprendendo React: Batching e Atualizações Funcionais
Eu achava que chamar um setter de estado várias vezes causava múltiplas renderizações.
Eu estava errado.
O React é mais inteligente que isso. Ele utiliza um processo chamado Automatic Batching.
Em vez de renderizar após cada atualização individual, o React as agrupa. Ele coleta todas as atualizações e realiza uma única renderização. Isso economiza performance.
Aqui está o que aprendi hoje.
O Processo de Batching Quando você chama múltiplas funções de estado, o React segue este fluxo:
- Ocorrem múltiplas atualizações de estado.
- O React as agrupa.
- O React realiza uma renderização.
- O React aplica as mudanças na UI.
O Problema com Atualizações Padrão Eu tentei este código: setCount(count + 1); setCount(count + 1); setCount(count + 1);
Eu esperava que o contador fosse de 0 para 3. Ele foi de 0 para 1.
Isso acontece porque setCount(count + 1) não significa "aumentar o contador". Significa "definir o contador para este valor específico".
Se o count é 0, cada linha diz ao React para definir o count como 1. O React agrupa essas chamadas e vê que a instrução final é definir o count como 1.
A Solução: Atualizações Funcionais Para corrigir isso, você deve usar uma atualização funcional. Isso utiliza o estado mais recente disponível na fila de atualizações.
A maneira correta: setCount((prev) => prev + 1);
Quando você usa esse padrão, o React fornece a cada atualização o valor mais recente.
- Primeira atualização: 0 + 1 = 1
- Segunda atualização: 1 + 1 = 2
- Terceira atualização: 2 + 1 = 3
Agora o contador realmente chega a 3.
Um Erro Comum Eu uma vez escrevi: setCount((prev) => { prev + 1 });
O contador tornou-se undefined. Quando você usa chaves em uma arrow function, deve usar a palavra-chave return. Use isto em vez disso: setCount((prev) => prev + 1);
Pontos Chave:
- O React agrupa múltiplas atualizações de estado para melhorar a velocidade.
- Chamadas de setState nem sempre disparam renderizações imediatas.
- Atualizações padrão usam o valor do ciclo de renderização atual.
- Atualizações funcionais usam o estado mais recente da fila de atualizações.
- O React utiliza uma fila de atualização (Update Queue) interna para gerenciar essas mudanças.