Busque em todas as páginas da documentação
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥
O React 19 é um lançamento importante que introduz arquitetura server-first, novos hooks e otimizações automáticas. Aqui está a lista de verificação rápida do que foi lançado:
Funcionalidade Categoria
------- --------
Server Components (RSC) Arquitetura
Server Actions Mutações de dados
Form Actions Integração com DOM
Hook use() Busca de dados / context
useActionState Gerenciamento de estado de formulário
useFormStatus UI Pendente
useOptimistic Atualizações Otimistas
ref como prop Simplificação de API
APIs de Carregamento de Assets Performance
React Compiler Auto-memoizaçãoQuando usar isso: Leia esta página primeiro ao iniciar um novo projeto React 19 ou planejar uma migração do React 18.
// Um único componente que toca em muitos recursos do React 19 ao mesmo tempo
import { use, useOptimistic, useActionState } from "react";
import { saveComment } from "./actions"; // server action
type Comment = { id: string; text: string };
function CommentThread({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
// use() desempacota a promise (consciente de Suspense)
const comments = use(commentsPromise);
// useOptimistic para feedback instantâneo
const [optimistic, addOptimistic] = useOptimistic(
comments,
(state, newText: string) => [...state, { id: "temp", text: newText }]
);
// useActionState para conectar uma server action
const [_state, formAction, isPending] = useActionState(
async (_prev: Comment[], formData: FormData) => {
const text = formData.get("text") as string;
addOptimistic(text);
await saveComment(text);
return [...comments, { id: crypto.randomUUID(), text }];
},
comments
);
return (
<section>
{/* Metadados do Documento enviados automaticamente para <head> */}
<title>Comentários ({optimistic.length})</title>
<meta name="description" content="Thread de comentários ao vivo" />
<ul>
{optimistic.map((c) => (
<li key={c.id}>{c.text}</li>
))}
</ul>
<form action={formAction}>
<input name="text" required />
<button disabled={isPending}>Postar</button>
</form>
</section>
);
}
// ref como prop - não precisa de forwardRef
function FancyInput({ placeholder, ref }: { placeholder: string; ref?: React.Ref<HTMLInputElement> }) {
return <input placeholder={placeholder} ref={ref} />;
}
export { CommentThread, FancyInput };O que isso demonstra:
use() desempacotando uma promise dentro de um componenteuseOptimistic para feedback instantâneo na UIuseActionState vinculando uma server action a um formulário<title>, <meta>) renderizados inlineref recebido como uma prop regular sem forwardRef"use server" que o framework transforma em endpoints RPC. Elas podem ser passadas para formulários, chamadas de manipuladores de eventos ou invocadas de transições.<form action={fn}>. O React gerencia o estado pendente, tratamento de erros e atualizações otimistas automaticamente.useFormState. Ele retorna [state, action, isPending] e funciona tanto no cliente quanto com aprimoramento progressivo no servidor.forwardRef não é mais necessário. Componentes de função recebem ref como uma prop regular. forwardRef ainda funciona, mas é depreciado e será removido em uma versão futura.<title>, <meta>, <link>) renderizadas em qualquer lugar na árvore de componentes são automaticamente enviadas para <head>.preload, preinit, prefetchDNS, preconnect) de react-dom permitem carregar fontes, scripts e folhas de estilo de forma antecipada.useMemo, useCallback e React.memo manuais na maioria dos casos.O React 19 funciona em dois modos principais:
use(), atualizações otimistas, hoisting de metadados e o compilador. Sem server components ou server actions.@types/react e @types/react-dom atualizados (versão 19+). Instale-os juntos.ref agora faz parte do tipo de props. Se você usar React.ComponentProps<typeof MyComponent>, ele incluirá ref automaticamente.useActionState é genérico: useActionState<State>(action, initialState).use() é genérica: use<T>(resource: Promise<T> | React.Context<T>): T.useFormState foi renomeado. Correção: Substitua todas as importações de useFormState por useActionState de "react" (não "react-dom").forwardRef ainda funciona, mas dispara um aviso de depreciação em desenvolvimento. Correção: Refatore para aceitar ref como uma prop regular.<Context> agora pode ser renderizado diretamente em vez de <Context.Provider>. A sintaxe .Provider ainda funciona, mas é depreciada. Correção: Substitua <MyContext.Provider value={v}> por <MyContext value={v}>.undefined implicitamente) será sinalizado. Correção: Se o seu callback de ref não retornar nada, certifique-se de que ele retorne explicitamente undefined ou retorne uma função de limpeza.| Abordagem | Quando escolher |
|---|---|
| Permanecer no React 18 | Aplicativo grande sem necessidade imediata de server components ou novos hooks |
| Adoção incremental | Adicione "use client" aos componentes existentes e adote recursos do React 19 arquivo por arquivo |
| Reescrever completamente com RSC | Projeto Greenfield usando Next.js 15+ ou um framework com suporte a RSC |
| React 19 apenas no cliente | SPA que se beneficia de use(), atualizações otimistas e o compilador sem infraestrutura de servidor |
"use client"use() para ler promises e context (pode ser chamado condicionalmente)useActionState para gerenciamento de estado de formulário (substitui useFormState)useFormStatus para UI pendente em descendentes de formuláriouseOptimistic para atualizações otimistas instantâneaspreload, preinit, prefetchDNS, preconnectuse(), atualizações otimistas, hoisting de metadados e o React CompileruseFormState foi renomeado para useActionState antes do lançamento estável"react", não de "react-dom"useActionState(action, initialState) retornando [state, action, isPending]Tags como <title>, <meta> e <link> renderizadas em qualquer lugar na árvore de componentes são automaticamente enviadas para <head>:
function Page() {
return (
<div>
<title>Minha Página</title>
<meta name="description" content="Olá" />
<h1>Conteúdo</h1>
</div>
);
}ref como uma prop regularforwardRef ainda funciona, mas é depreciado e será removido em uma versão futuraref do segundo argumento de forwardRef para o objeto de propsundefined implicitamente de uma expressão de arrow function) será sinalizado com um avisoconst [state, action, isPending] = useActionState<MyState>(
async (prev: MyState, formData: FormData) => {
// retorna novo estado
return { ...prev, updated: true };
},
{ updated: false }
);useActionState é genérico: useActionState<State>(action, initialState)(prevState: State, formData: FormData) => Promise<State>use<T>(resource: Promise<T> | React.Context<T>): T"react": import { use } from "react"useMemo, useCallback e React.memo manuais na maioria dos casosuse() pode ser chamado condicionalmente (dentro de blocos if, loops, retornos antecipados) enquanto useContext não podeuse() também aceita promises, não apenas objetos de contextuse(context) é a substituição preferida para useContext(context) daqui para frente"use client" aos componentes existentes e adote recursos arquivo por arquivo@types/react e @types/react-dom versão 19+) juntosuseFormState por useActionState de "react"<Context.Provider> por <Context value={v}> (opcional, a sintaxe antiga ainda funciona)<form action={}>, useActionState, useFormStatusRevisado por Chris St. John·Última atualização: 19 de jul. de 2026
🤖 Read the SystemsArchitect.io Blog for over 100+ cloud architecture articles 🔥