Padrões de Agrupamento Automático do React 18

Referência para diagnosticar e corrigir a alteração silenciosa mais perigosa no React 18 para bases de código com componentes de classe.

A Mudança Principal

Agrupado significa: todas as chamadas de setState dentro desse contexto de execução são processadas juntas em uma única renderização no final. Nenhuma renderização intermediária ocorre.

Diagnóstico Rápido

Leia todos os métodos de classe assíncronos. Pergunte: algum código após um await lê this.state para tomar uma decisão?

Code reads this.state after await?
  YES → Category A (silent state-read bug)
  NO, but intermediate render must be visible to user?
    YES → Category C (flushSync needed)
    NO → Category B (refactor, no flushSync)

Para o padrão completo de cada categoria, leia:

• references/batching-categories.md - Categoria A, B, C com código completo antes/depois
• references/flushSync-guide.md - quando usar flushSync, quando NÃO usar, sintaxe de importação

A Regra do flushSync

Use flushSync com moderação. Isso força uma renderização síncrona, contornando o scheduler concorrente do React 18. O uso excessivo anula os benefícios de desempenho do React 18.

Use flushSync apenas quando:

• O usuário deve ver um estado de UI intermediário antes que uma operação assíncrona comece
• Um estado de spinner/carregamento deve renderizar antes que uma busca comece
• Passos de UI sequenciais têm estados visíveis distintos (assistente de progresso, fluxo de várias etapas)

Na maioria dos casos, a correção é um refatoramento - reestruturar o código para não ler this.state após await. Leia references/batching-categories.md para a abordagem correta por categoria.