React 19: recursos e limites de cada mudança
Fala, dev! React 19 chegou à versão estável em 5 de dezembro de 2024. Nesta revisão, vamos apresentar os recursos da linha 19 e corrigir conceitos que se confundiam no texto original: React Compiler, Actions, Server Components, SSR e carregamento de recursos têm responsabilidades diferentes.
O anúncio do React 19 é o ponto de partida para conferir as novidades. Não existe um ganho de desempenho percentual garantido apenas por atualizar a dependência: resultados dependem do aplicativo, da configuração e das medições.
Principais recursos do React 19
React Compiler: uma ferramenta separada
React Compiler analisa componentes e Hooks durante a compilação e automatiza parte da memoização. Ele não transforma uma aplicação React em JavaScript sem React, nem é ativado apenas por instalar a versão 19. Sua adoção depende da configuração do ambiente e da compatibilidade do código.
Veja a introdução ao React Compiler e avalie o resultado no seu projeto. Não use uma promessa de “dobrar a velocidade” como justificativa para habilitá-lo.
Actions e formulários
Na linha 19, funções passadas a action de um formulário permitem expressar a operação de envio. useActionState, importado de react, relaciona o resultado da Action ao estado e informa se a execução está pendente. O nome useFormState pertence à API anterior de canais Canary e foi substituído.
import { useActionState } from 'react';
export default function FormularioNome() {
const [mensagem, enviar, pendente] = useActionState(async (_anterior, dados) => {
const nome = String(dados.get('nome') ?? '').trim();
return nome ? `Olá, ${nome}!` : 'Preencha seu nome.';
}, '');
return (
<form action={enviar}>
<label htmlFor="nome">Nome</label>
<input id="nome" name="nome" required />
<button type="submit" disabled={pendente}>Enviar</button>
<p role="status">{mensagem}</p>
</form>
);
}O exemplo valida um valor e mostra uma mensagem; não grava dados em um servidor. Veja a referência de useActionState antes de adaptar a Action para sua aplicação.
useFormStatus, de react-dom, permite que um componente filho leia o estado do formulário que o contém. Chamá-lo no componente que cria o próprio formulário não faz com que ele observe esse formulário. Confira a referência de useFormStatus.
Server Components e Server Functions
Server Components executam em um ambiente de servidor ou de build e podem reduzir o código de componente enviado ao cliente. Componentes interativos continuam precisando de execução no cliente. Adotar essa arquitetura exige infraestrutura de framework ou bundler compatível; atualizar React sozinho não a configura.
Server Components não são sinônimo de SSR. Também não recebem uma diretiva use server: essa diretiva identifica funções de servidor em ambientes compatíveis. Consulte a referência de Server Components.
Carregamento de recursos
React DOM oferece APIs como preload, preinit e preconnect para antecipar recursos conhecidos. Frameworks podem administrar esse carregamento. Veja as APIs de recursos do React DOM antes de acrescentar chamadas manuais.
Folhas de estilo declaradas com link e precedence recebem tratamento de ordem e deduplicação. Scripts externos com async também têm comportamento específico. Isso não significa que toda imagem, rota ou arquivo passou a ser carregado automaticamente em segundo plano. Confira as referências de link e script.
Metadados do documento
React 19 permite declarar elementos como title e meta nos componentes e posicioná-los no cabeçalho do documento. Não existe um componente nativo chamado DocumentHead. Em aplicações com framework, siga também sua API de metadados para evitar responsabilidades duplicadas.
export default function TituloArtigo({ titulo }) {
return (
<>
<title>{titulo}</title>
<h1>{titulo}</h1>
</>
);
}O exemplo é para uma aplicação que administra esses elementos diretamente. A referência de title descreve o comportamento e os cuidados com títulos concorrentes.
Web Components
React oferece integração com elementos HTML personalizados. Propriedades e atributos têm comportamentos diferentes, e eventos personalizados precisam ser ligados com os nomes corretos. Para integrar um componente externo, confira seu contrato e a seção de elementos personalizados do React DOM.
Novos Hooks e a API use
useOptimistic permite representar temporariamente uma atualização enquanto uma operação está pendente. A interface ainda precisa lidar com sucesso e falha da operação real; não confunda feedback otimista com dados já persistidos. Consulte a referência de useOptimistic.
A API use lê recursos como Promises durante a renderização e pode trabalhar com Suspense. Ela tem regras diferentes dos Hooks tradicionais. Promises consumidas no cliente precisam ter identidade estável; criar uma nova a cada renderização causa problemas. Confira a referência de use.
O que muda na experiência da aplicação
Transições e resposta às interações
Transições ajudam a diferenciar atualizações que podem ser interrompidas de uma interação urgente. useTransition informa o estado pendente dessa transição. Use-o quando o fluxo justificar essa distinção, sem esperar que qualquer operação fique automaticamente mais rápida. Veja a referência de useTransition.
SSR e SEO precisam de arquitetura
SSR depende do ambiente de renderização e do framework. Server Components podem participar de uma arquitetura que produz HTML no servidor, mas React 19 não adiciona “SSR automático” a qualquer aplicação. Título e conteúdo adequados também não garantem uma posição no resultado de busca. A referência de Server Components distingue essas responsabilidades.
Suspense e estados de carregamento
Suspense exibe um fallback quando um descendente suspende com uma fonte compatível. Ele não observa automaticamente qualquer fetch iniciado em um efeito. Posicione os limites de acordo com o conteúdo que deve carregar junto e use uma biblioteca ou framework compatível. Consulte a referência de Suspense.
Estado compartilhado continua sendo uma decisão de projeto
React 19 não introduziu um gerenciador universal de estado global. Context compartilha valores com componentes descendentes; estado local, reducers e bibliotecas continuam atendendo necessidades diferentes. Use o guia Compartilhando dados com Context para começar com o problema que precisa resolver.
Atualizando um projeto para a linha 19
Identifique o ambiente e as dependências
Confira a versão do framework, componentes de terceiros e requisitos das bibliotecas. Se o projeto vem do React 18, a documentação recomenda passar pelo 18.3 para identificar avisos de APIs antigas. O React 19 exige o transformador JSX moderno. Consulte o guia de atualização.
Migre em uma alteração revisável
Atualize React e React DOM de forma compatível e ajuste os tipos quando usar TypeScript. Revise os codemods e as mudanças incompatíveis documentadas. Preserve um ponto de retorno e evite misturar a migração com uma reescrita completa da aplicação.
Use StrictMode para encontrar problemas
No desenvolvimento, StrictMode acrescenta verificações de renderização, efeitos e callbacks de refs. Uma execução extra pode revelar uma limpeza ausente ou uma operação indevida durante a renderização. Corrija a causa e confira a documentação do StrictMode.
Verifique os fluxos do seu projeto
Revise formulários, navegação, carregamento, tratamento de falhas e hidratação quando houver renderização no servidor. Compare o comportamento antes e depois. Para avaliar desempenho, registre condições e medições do aplicativo em vez de repetir percentuais sem origem.
Próximo passo
Escolha um recurso que resolva um problema real do seu projeto, como simplificar um formulário ou organizar seu carregamento. Implemente uma mudança pequena, confira a documentação específica e observe o comportamento. Se estado e efeitos ainda geram dúvidas, volte ao artigo O que são React Hooks?.
