React 19: O que há de novo e como migrar seus projetos

O React 19 chegou e trouxe a maior mudança de modelo mental dos últimos anos. Não é apenas mais uma versão com melhorias de performance — é uma reorganização de como pensamos sobre dados, formulários e estado assíncrono.

1. Actions: o fim dos formulários manuais

A grande estrela são as Actions. Em vez de gerires manualmente o estado de carregamento, os erros e os pedidos otimistas de cada formulário, passas uma função assíncrona diretamente ao <form action={...}>. O React trata do resto: pending state, erros e revalidação.

<form action={async (formData) => {
  await subscribe(formData);
}}>
  <input name="email" type="email" />
  <SubmitButton />
</form>

2. Hooks novos: useOptimistic e useFormStatus

O useOptimistic permite mostrar o resultado esperado antes da resposta do servidor chegar — a interface responde instantaneamente, mesmo em redes lentas. Já o useFormStatus resolve o problema antigo de saber se um formulário está a ser submetido, sem passar props através da árvore de componentes.

3. Como migrar com segurança

Migrar não precisa de ser um salto no escuro. O caminho mais seguro é este:

1. Atualiza o React e o React DOM em paralelo — versões desencontradas são a causa mais comum de erros estranhos.
2. Atualiza as ferramentas de build: @types/react, TypeScript 5.4+ e o plugin do teu bundler.
3. Corre npm run build e resolve primeiro os avisos, depois os erros. A tua base de testes apanha as regressões.
4. Migra um formulário de cada vez para Actions. Não reescrevas tudo de uma vez.

Vale a pena migrar agora?

Sim, se estás a iniciar um projeto novo — começar já em React 19 evita uma migração futura dolorosa. Se tens um projeto em produção estável, o caminho certo é criar uma branch, correr a suite de testes e migrar de forma incremental. Sem pressa, sem pânico.