Reagir 19, lançado no final de 2024 e amplamente adotado entre 2025 e 2026, traz as mudanças mais significativas desde os ganchos. O novo compilador, componentes de servidor, ações e contexto simplificado estão remodelando a forma como os aplicativos React são construídos.
📋 Table of Contents
Compilador React — Chega de useMemo/useCallback
O React Compiler memoriza automaticamente componentes e valores. Remover a maioriauseMemo,useCallbackememo()chamadas.
// React 18: Manual memoization
const ExpensiveComponent = memo(({ data }) => {
const processed = useMemo(() => processData(data), [data]);
const handleClick = useCallback(() => onClick(data), [data, onClick]);
return <div onClick={handleClick}>{processed}</div>;
});
// React 19: Compiler handles it automatically
function ExpensiveComponent({ data }) {
const processed = processData(data);
return <div onClick={() => onClick(data)}>{processed}</div>;
}Componentes do servidor
Os componentes do servidor são executados no servidor, acessam os bancos de dados diretamente e não enviam nenhum JavaScript ao cliente. Padrão em Next.js 14+.
// app/users/page.tsx — runs on server, no JS sent to client
import { db } from '@/lib/db';
export default async function UsersPage() {
const users = await db.query('SELECT * FROM users LIMIT 10');
return (
<ul>
{users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
);
}Ações — Servidor e Cliente
As ações substituem o antigo manipulador de eventos + padrão de busca. Lide automaticamente com estados pendentes, erros e atualizações otimistas.
async function createUser(formData: FormData) {
'use server';
const name = formData.get('name') as string;
await db.insert('users', { name });
revalidatePath('/users');
}
export default function CreateUserForm() {
return (
<form action={createUser}>
<input name="name" placeholder="Name" />
<button type="submit">Create</button>
</form>
);
}Gancho useActionState
Rastreia estados pendentes, de erro e de sucesso automaticamente. Substitui o uso detalhado + manipulação manual de formulários.
import { useActionState } from 'react';
async function signUp(prevState, formData) {
const email = formData.get('email');
try {
await createAccount(email);
return { success: true };
} catch (e) {
return { error: e.message };
}
}
function SignUpForm() {
const [state, action, isPending] = useActionState(signUp, null);
return (
<form action={action}>
<input name="email" type="email" />
{state?.error && <p className="error">{state.error}</p>}
{state?.success && <p>Account created!</p>}
<button disabled={isPending}>
{isPending ? 'Creating...' : 'Sign Up'}
</button>
</form>
);
}use() Gancho — Assíncrono em Componentes
Leia as promessas e o contexto embutidos. Não maisuseEffectpara busca de dados em componentes do cliente.
import { use, Suspense } from 'react';
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
return res.json();
}
function UserCard({ userPromise }) {
const user = use(userPromise); // Suspense-aware
return <div>{user.name}</div>;
}
// In parent:
<Suspense fallback={<Skeleton />}>
<UserCard userPromise={fetchUser(userId)} />
</Suspense>Contexto Simplificado
Provedores de contexto agora usam<Context>diretamente — nada mais.Provider.
const ThemeContext = createContext('light');
// React 19: Direct
function App() {
return (
<ThemeContext value="dark">
<Page />
</ThemeContext>
);
}
// React 18: Required .Provider
function App() {
return (
<ThemeContext.Provider value="dark">
<Page />
</ThemeContext.Provider>
);
}Conclusão
React 19 é a versão mais amigável ao desenvolvedor até agora. O compilador elimina o padrão de desempenho, os componentes do servidor reduzem o tamanho do pacote e as ações simplificam o manuseio de formulários. Se você ainda usa o React 17 ou 18, atualize agora.
🔗 Share this article
✍️ Leave a Comment