React 19 APIs and Server Components

React 19 added Actions (async transitions and form actions), useActionState, useFormStatus, useOptimistic, the use() API (read promises and context, even conditionally), ref as a prop, native <title>/<meta> support in components, and stylesheet/script resource handling. 19.2 added <Activity> and useEffectEvent.

React Server Components (RSC) render on the server (or at build time), can access databases directly, and send no JavaScript for themselves; interactive parts are Client Components marked with "use client". RSC requires a framework (Next.js App Router, React Router framework mode experiments, Waku).

import { useOptimistic, startTransition } from "react";

function Messages({ messages, send }: { messages: Msg[]; send: (text: string) => Promise<void> }) {
  const [optimistic, addOptimistic] = useOptimistic(messages, (state, text: string) => [
    ...state,
    { id: "temp", text, sending: true },
  ]);

  async function formAction(formData: FormData) {
    const text = String(formData.get("text"));
    addOptimistic(text);
    await send(text);
  }

  return (
    <>
      <title>{`Chat (${messages.length})`}</title>
      <ul>{optimistic.map((m) => <li key={m.id}>{m.text}{m.sending && " (sending…)"}</li>)}</ul>
      <form action={formAction}><input name="text" /><button>Send</button></form>
    </>
  );
}

Common pitfalls

• Adding "use client" to everything in an RSC app, losing the benefits.
• Passing non-serializable props (functions, class instances) from Server to Client Components.
• Calling use(promise) with a promise created during render (new promise each render).

Key points

• Actions, useOptimistic and use() in React 19
• Server Components ship no JS for themselves
• RSC requires a framework

Further reading: react.dev: React 19 release

Go deeper: The Browser Side: React and Vue Page Loads in the Request Lifecycle course traces this step of the request, with a production bug and a runnable simulation.