Functional Updates Atualizações funcionais
Última atualização: 2026-11-03
Functional Updates Atualizações funcionais
Passar uma função ao setState, como setCount(c => c + 1), significa calcular o próximo estado a partir do valor anterior mais recente. Quando várias atualizações rodam no mesmo evento, ou quando o estado é lido dentro de um closure assíncrono como um timer, essa forma é obrigatória para não trabalhar com um valor desatualizado. A diferença é invisível em casos simples e decisiva nos complicados.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Padrão |
| Desde | React 16.8 |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
setCount((prev) => prev + 1) // ✅ baseado no valor mais recente, seguro para chamar repetidas vezes
setCount(count + 1) // ❌ um valor de closure desatualizado, perdido em atualizações em lote⚙️ Parâmetros
| updater (update function) | Uma função pura que recebe o valor de estado mais recente e devolve o próximo; ela deve ser livre de efeitos colaterais, porque o React pode chamá-la várias vezes. |
|---|
Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Dois contadores, cada um com um botão: clicar em "Functional +3" soma exatamente três, enquanto o botão "Direct value" soma apenas um por clique porque as atualizações em lote se sobrescrevem — a diferença entre os dois estilos fica evidente à primeira vista.💡 Pontos-chave
⚠️ Aviso Várias chamadas de set dentro de um mesmo handler de evento são agrupadas em lote: com um valor direto só a última sobrevive, enquanto as atualizações funcionais sempre partem do valor anterior.
💡 Dica Dentro de código assíncrono como setTimeout ou callbacks de promise, o estado capturado está sempre desatualizado, então use atualizações funcionais ali.
ℹ️ Informação A função de atualização deve ser pura: o React pode chamá-la mais de uma vez no modo concorrente para verificar o resultado, e efeitos colaterais quebrariam isso.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Qual a diferença entre setCount(count + 1) e setCount(c => c + 1)?
R O primeiro usa o valor desatualizado do closure da renderização atual, então as atualizações em lote se sobrescrevem; o segundo enfileira as atualizações e calcula cada uma a partir do valor anterior mais recente, então o resultado é sempre correto.
P Por que três chamadas consecutivas de setState somaram apenas um?
R As três chamadas de setCount(count + 1) leem o mesmo valor antigo, e o React as agrupa em uma só, então só a última vale. Usar setCount(c => c + 1) três vezes soma três.
P Por que o valor do estado fica errado quando eu atualizo dentro de setTimeout?
R O callback do timer fecha sobre o estado como ele era quando o timer foi criado. Use uma atualização funcional como setX(prev => ...) ou reconstrua o timer sempre que suas dependências mudarem.
