📊 Capítulo 03: useState & Imutabilidade

Especialização em Frontend com React

🗺️ O Comportamento do Automatic Batching no React 18/19

flowchart TD
    EVENT["Usuário clica em 'Comprar'"]
    --> SET1["setItens(prev => [...prev, novo])"]
    --> SET2["setTotal(prev => prev + 100)"]
    --> SET3["setCarregando(false)"]
    SET3 --> QUEUE["Fila de Atualizações Agrupadas (Batching Automático)"]
    QUEUE --> SINGLE_RENDER["UMA ÚNICA Re-renderização do Componente! (Zero renderizações intermediárias) ⚡"]

    style EVENT fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style SET1 fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style SET2 fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style SET3 fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style QUEUE fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style SINGLE_RENDER fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: A Regra de Ouro: Imutabilidade

• Nunca mute o estado diretamente:
  • ❌ usuario.nome = 'Novo'; (O React não detecta a mudança por referência === e não re-renderiza!)
  • ✅ setUsuario(prev => ({ ...prev, nome: 'Novo' }));

🎯 Slide 2: Atualizações Baseadas no Estado Anterior

// Quando múltiplos eventos ocorrerem em sequência:
setContador(prev => prev + 1);
setContador(prev => prev + 1);
// Garante que o contador suba +2 e não perca atualizações concorrentes!

🎯 Slide 3: Lazy Initial State

// Executa o cálculo pesado apenas na PRIMEIRA montagem:
const [config] = useState(() => carregarConfiguracaoPesadaLocalStorage());