🚀 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

Category	Feature	Solves
Async	use()	Direct Promise usage + Suspense
UI	useOptimistic()	Instant optimistic UI
Forms	useFormStatus()	Auto pending/error
Mutations	Actions	Unified client/server mutations
Rendering	New form handling	Native async submit
Performance	React Compiler	Auto memoization
SSR	Asset Ownership	Faster hydration
Stability	New refs	Predictable, stable refs

---

🎉 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.

---