🚀 React 19 — All new features (2025)

React 19 is the biggest upgrade after React 18 and officially completes React’s shift toward an async-first architecture.

This release introduces:

• New async hooks
• Unified actions for mutations
• Optimistic UI
• Native <form> async workflows
• Better streaming & asset loading
• React Compiler (auto memoization)
• Strict Mode improvements
• Server Component upgrades

This guide goes section by section, with examples and real-world usage patterns.

🟦 A. New Hooks & Async Behaviors

1️⃣ use() — Consume Promises Directly Inside Components

React 19 allows you to directly “await” a Promise inside a component using the use() hook.

This eliminates the need for:

• useEffect()
• useState()
• manual loading state
• manual error state

Instead, React suspends the component until the Promise resolves.

🔹 Complete use() Example — With Component + Suspense Wrapper

Async function

async function fetchUser() { const res = await fetch("https://jsonplaceholder.typicode.com/users/1"); if (!res.ok) throw new Error("Failed to fetch user"); return res.json(); } 

Component using use()

import { use } from "react"; function UserDetails() { const user = use(fetchUser()); // Suspends until resolved return ( <div className="user-card"> <h2>{user.name}</h2> <p>Email: {user.email}</p> <p>Company: {user.company.name}</p> </div> ); } 

Suspense wrapper

import { Suspense } from "react"; export default function Page() { return ( <div> <h1>User Profile</h1> <Suspense fallback={<p>Loading user...</p>}> <UserDetails /> </Suspense> </div> ); } 

✔️ Why this matters

• Cleaner async code → no effect handlers
• Works with SSR + streaming
• Integrates natively with Suspense

2️⃣ useFormStatus() — Automatic Pending State for Forms

Tracks submission and pending/error states of the nearest form.

Example:

function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>{pending ? "Saving..." : "Save"}</button>; } 

• Works with Server Actions
• Works with Client Actions
• No manual loading states

3️⃣ useOptimistic() — Instant UI Updates

For optimistic experiences (chat apps, todos, comments, likes).

const [optimisticTodos, addOptimistic] = useOptimistic( todos, (current, newTodo) => [...current, { text: newTodo, optimistic: true }] ); 

This updates the UI immediately while the real async action runs.

🟦 B. Actions (Server + Client)

Actions unify how React handles mutations.

4️⃣ Server Actions (Framework Feature)

Run backend code securely from UI — no API routes required.

"use server"; async function savePost(formData) { await db.post.create({ title: formData.get("title") }); } 

<form action={savePost}> <input name="title" /> <button>Save</button> </form> 

Features:

• Secure (never sent to client)
• Automatic revalidation of components
• Streaming-friendly
• Pending + error states handled automatically

5️⃣ Client Actions (React Core Feature)

For React apps without a framework (Vite, CRA, etc).

const [state, action] = useActionState(async (prev, fd) => { return { message: "Saved!" }; }, {}); 

<form action={action}> <input name="name" /> <SubmitButton /> </form> 

React handles:

• pending
• result
• errors

All automatically.

🟦 C. Rendering Improvements

6️⃣ Native <form> Handling (Action-Based Forms)

React 19 lets you submit forms via:

<form action={myActionFunction}> 

Meaning:

• No onSubmit
• No e.preventDefault()
• No useState() for loading
• Fully async-aware
• Automatically tracks pending/error states

7️⃣ Built-In Pending, Error, Success States

React attaches these states to actions:

• pending
• error
• result

Works with:

• useFormStatus()
• useActionState()
• Suspense

8️⃣ Native Navigation Transitions (Experimental)

Aligns client navigation with async transitions:

startTransition(() => { navigate("/dashboard"); }); 

This is the direction React is moving for future routing.

🟦 D. Asset Loading Improvements

9️⃣ Component-Level <link> and <script> Ownership

You can now include assets inside components:

<link rel="stylesheet" href="/profile.css" /> 

React:

• preloads assets
• hoists them safely
• deduplicates
• improves SSR + hydration timing

🔟 Improved Style/Script Ordering

React ensures:

• CSS is loaded before hydration to prevent layout shifts
• Scripts execute in correct order
• Suspense boundaries hydrate correctly

This significantly improves SSR and streaming performance.

🟦 E. React Compiler (React Forget) & Performance Upgrades

The React Compiler is now production-ready and automates most performance optimizations.

1️⃣1️⃣ React Compiler — What It Does

Removes the need for:

• useMemo
• useCallback
• React.memo

The compiler analyzes your component and automatically memoizes where needed.

Before

const handleClick = useCallback(() => { console.log(user.name); }, [user]); 

After

function handleClick() { console.log(user.name); } 

The compiler stabilizes function identity automatically.

🔥 How to Enable the React Compiler

✔️ Next.js 15 → Enabled by default

Check next.config.js:

module.exports = { reactCompiler: true, }; 

✔️ Vite + React

npm install @vitejs/plugin-react 

import react from '@vitejs/plugin-react'; export default { plugins: [ react({ babel: { plugins: ["react-compiler"] } }) ] }; 

✔️ Webpack / Babel / SWC

SWC config:

{ "jsc": { "experimental": { "reactCompiler": true } } } 

Babel config:

{ "plugins": ["react-compiler"] } 

1️⃣2️⃣ Transition Tracing (DevTools)

New DevTools features let you inspect:

• which transition triggered a render
• why async components re-rendered
• which actions caused state updates
• suspense wake-ups

Critical for debugging async-heavy apps.

🟦 F. Strict Mode & Ref Improvements

1️⃣3️⃣ New Stable Ref Behavior

Before React 19, refs were:

• unset during updates
• recreated unnecessarily
• sometimes temporarily null

React 19 fixes this:

• refs are now set once per commit
• no flicker
• stable across transitions
• safer with async rendering

This is big for:

• editors (CodeMirror, Monaco)
• charts
• canvas apps
• imperative handles

1️⃣4️⃣ Strict Mode Improvements

Strict Mode now:

• simulates async transitions
• aligns with compiler behavior
• improves safety for auto-memoization
• reduces double-invocation quirks

🟦 G. Ecosystem & Server Components

1️⃣5️⃣ Unified Actions API Across Ecosystem

React 19 standardizes the mutation model across:

• React
• Next.js
• Remix
• Hydrogen
• Waku

All now use:

<form action={myAction}> 

This unifies client/server mutation patterns.

1️⃣6️⃣ Server Component Enhancements

Not officially part of React 19 but released alongside:

• better RSC streaming
• no waterfalls
• improved Suspense boundary matching
• more predictable hydration

This improves all full-stack React apps.

🟪 Final Summary

🎉 Final Thoughts

React 19 is a milestone release.

It transforms React into:

• async-native
• streaming-first
• mutation-unified
• compiler-optimized
• form-driven
• suspense-secure

If React 18 was the foundation, React 19 is the completion of that vision.