ReactReact 19Hooks
React 19 is the biggest release in years. It is less about new APIs to memorize and more about removing the ceremony around data and forms. Here are the changes that matter day to day.
1. The use() Hook
use() reads a Promise or Context and — unlike every other hook — can be called conditionally. Paired with Suspense, it makes async data feel synchronous:
tsx
import { use } from "react";
function Comments({ commentsPromise }) {
const comments = use(commentsPromise); // suspends until resolved
return comments.map((c) => <p key={c.id}>{c.text}</p>);
}2. Actions and useActionState
Actions wire async functions to forms with built-in pending and error state — no more manual useState for every submit:
tsx
const [state, formAction, isPending] = useActionState(
async (prev, formData) => {
const res = await save(formData);
return res.ok ? { ok: true } : { error: "Failed" };
},
{ ok: false }
);3. useOptimistic for Instant UI
Show the result immediately, then reconcile with the server response — perfect for likes, comments, and todos.
4. The React Compiler
- Auto-memoizes components and values, so most manual
useMemo/useCallbackbecomes unnecessary. refis now a regular prop — no moreforwardRefboilerplate.- Document metadata (
<title>,<meta>) can be rendered anywhere and hoists to <head>.
Migration Path
React 19 is largely backward compatible. Adopt the Compiler gradually, and let it replace your hand-written memoization rather than rewriting everything at once.
