📊 Capítulo 17: React 19 Actions & use()

Especialização em Frontend com React

🗺️ O Novo Paradigma de Ações e Estado Otimista no React 19

sequenceDiagram
    autonumber
    actor U as Usuário
    participant C as Componente (<form action={formAction}>)
    participant OTM as useOptimistic (UI Otimista Imediata)
    participant SA as Server Action (Node.js Server)

    U->>C: Clica em 'Curtir'
    C->>OTM: setOtimista(curtidas + 1)
    OTM-->>U: Interface atualiza instantaneamente! (Zero Latência Percebida) ⚡
    C->>SA: Dispara Server Action em background
    alt Sucesso no Banco
        SA-->>C: Retorna novo total confirmado
    else Falha de Rede / Erro 500
        SA-->>C: Rejeita com Erro
        C->>OTM: Desfaz a alteração otimista automaticamente! (Rollback)
    end

🎯 Slide 1: O Revolucionário Hook use()

• Pode ser chamado dentro de condicionais (if) e loops (ao contrário de todos os outros hooks tradicionais!).

• Desempacota Promises diretamente na renderização integrado ao <Suspense>!

function Detalhes({ promessaDados }: { promessaDados: Promise<Usuario> }) {
  const usuario = use(promessaDados); // Pausa a renderização até resolver!
  return <h1>{usuario.nome}</h1>;
}

🎯 Slide 2: useActionState para Mutações de Formulário

const [estado, formAction, isPending] = useActionState(
  async (estadoAnterior, formData) => {
    return await salvarPerfil(formData);
  },
  { sucesso: false }
);

• Controla o status de carregamento e o retorno de erros do formulário nativamente!

🎯 Slide 3: useFormStatus

• Permite que botões filhos saibam se o formulário pai está sendo submetido no momento sem precisar passar props manuais de loading!