React 19 APIs

Skimmable snippets for React 19 form actions, optimistic UI, use(), and related client APIs.

use Action State Form

useActionState wires a form action to pending state and the last result returned by the action.

const [state, formAction, isPending] = useActionState(updateName, null);
return (
  <form action={formAction}>
    <input name="name" />
    <button disabled={isPending}>Save</button>
    {state?.error && <p>{state.error}</p>}
  </form>
);

useFormStatus Pending

Read pending status from the parent <form> inside a child component without prop drilling.

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Saving…" : "Save"}
    </button>
  );
}

use Optimistic Update

Show the expected UI immediately while the async action runs, then reconcile with the real result.

const [optimistic, addOptimistic] = useOptimistic(messages);
async function send(formData: FormData) {
  const text = String(formData.get("text"));
  addOptimistic((prev) => [...prev, { text, pending: true }]);
  await postMessage(text);
}

use API for Promise

use(promise) reads a promise during render (with Suspense). Pass a stable promise from a cache or parent.

function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise);
  return <ul>{comments.map((c) => <li key={c.id}>{c.body}</li>)}</ul>;
}

use API for Context

use(Context) can read context and may be called after early returns, unlike useContext which must stay unconditional.

function Panel({ experimental }: { experimental: boolean }) {
  if (!experimental) return <LegacyPanel />;
  const theme = use(ThemeContext);
  return <div data-theme={theme}>…</div>;
}

ref as Prop

Function components can accept ref as a normal prop in React 19 - forwardRef is no longer required for simple cases.

function TextField({ ref, ...props }: React.ComponentProps<"input">) {
  return <input ref={ref} {...props} />;
}

Document Metadata Tags

Render <title> and <meta> from components; React hoists them into the document head appropriately in supported environments.

function ProductPage({ product }: { product: Product }) {
  return (
    <>
      <title>{product.name}</title>
      <meta name="description" content={product.summary} />
      <h1>{product.name}</h1>
    </>
  );
}

Stylesheet Precedence

Hint stylesheet ordering when injecting styles from components so critical CSS wins predictably.

<link rel="stylesheet" href="/product.css" precedence="default" />

Async Script in Tree

Render script tags as part of the tree when a component needs a third-party script lifecycle tied to UI presence.

return (
  <>
    <script src="https://example.com/widget.js" async />
    <div id="widget-root" />
  </>
);

Actions as Form Action

Pass an async function to action on <form> for progressive enhancement style mutations on the client (and servers in RSC apps).

async function createItem(formData: FormData) {
  "use server"; // in Server Actions environments
  await db.item.create({ name: String(formData.get("name")) });
}
return <form action={createItem}>…</form>;

Error Handling with Error Boundaries

Class error boundaries still catch render errors in children. Pair them with route-level fallbacks for resilient trees.

class Boundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { error: Error | null }
> {
  state = { error: null as Error | null };
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
  render() {
    return this.state.error ? this.props.fallback : this.props.children;
  }
}

Activity and Visibility Patterns

Prefer patterns that hide UI without losing state when your React version exposes Activity-style primitives; otherwise keep state in parents while toggling CSS or conditional render carefully.

// Keep expensive tab state mounted when switching tabs if remount cost is high:
{tabs.map((t) => (
  <div key={t.id} hidden={t.id !== active}>{t.panel}</div>
))}

Improved Hydration Mismatch Logs

When text differs between server and client, fix the source (dates, locale, random) instead of silencing warnings. Use suppressHydrationWarning only for known clock text.

<time suppressHydrationWarning>{new Date().toLocaleString()}</time>

Cleanup of Deprecated APIs

Prefer function components and hooks over legacy propTypes, string refs, and old context APIs. Migrate off deprecated ReactDOM render APIs to createRoot.

import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render(<App />);

Server-Friendly Client Boundaries

In RSC apps, keep "use client" islands small. Fetch on the server when possible; pass serializable props into client widgets.

// Client island
"use client";
export function LikeButton({ id }: { id: string }) {
  return <button type="button" onClick={() => like(id)}>Like</button>;
}

Forms and Controlled Inputs - classic controlled patterns alongside actions
Performance Idioms - transitions pair well with concurrent forms
TypeScript with React - typing actions and event handlers

react.dev/reference - pure API reference (Hooks, built-in components, directives)
react.dev - official React docs (Learn + full API reference)
This Week in React - curated weekly React news

Stack versions: React 19 · TypeScript (strict) · App Router / RSC where noted

React 19 APIs

Skimmable snippets for React 19 form actions, optimistic UI, use(), and related client APIs.

use Action State Form

useActionState wires a form action to pending state and the last result returned by the action.

const [state, formAction, isPending] = useActionState(updateName, null);
return (
  <form action={formAction}>
    <input name="name" />
    <button disabled={isPending}>Save</button>
    {state?.error && <p>{state.error}</p>}
  </form>
);

useFormStatus Pending

Read pending status from the parent <form> inside a child component without prop drilling.

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Saving…" : "Save"}
    </button>
  );
}

use Optimistic Update

Show the expected UI immediately while the async action runs, then reconcile with the real result.

const [optimistic, addOptimistic] = useOptimistic(messages);
async function send(formData: FormData) {
  const text = String(formData.get("text"));
  addOptimistic((prev) => [...prev, { text, pending: true }]);
  await postMessage(text);
}

use API for Promise

use(promise) reads a promise during render (with Suspense). Pass a stable promise from a cache or parent.

function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise);
  return <ul>{comments.map((c) => <li key={c.id}>{c.body}</li>)}</ul>;
}

use API for Context

use(Context) can read context and may be called after early returns, unlike useContext which must stay unconditional.

function Panel({ experimental }: { experimental: boolean }) {
  if (!experimental) return <LegacyPanel />;
  const theme = use(ThemeContext);
  return <div data-theme={theme}>…</div>;
}

ref as Prop

Function components can accept ref as a normal prop in React 19 - forwardRef is no longer required for simple cases.

function TextField({ ref, ...props }: React.ComponentProps<"input">) {
  return <input ref={ref} {...props} />;
}

Document Metadata Tags

Render <title> and <meta> from components; React hoists them into the document head appropriately in supported environments.

function ProductPage({ product }: { product: Product }) {
  return (
    <>
      <title>{product.name}</title>
      <meta name="description" content={product.summary} />
      <h1>{product.name}</h1>
    </>
  );
}

Stylesheet Precedence

Hint stylesheet ordering when injecting styles from components so critical CSS wins predictably.

<link rel="stylesheet" href="/product.css" precedence="default" />

Async Script in Tree

Render script tags as part of the tree when a component needs a third-party script lifecycle tied to UI presence.

return (
  <>
    <script src="https://example.com/widget.js" async />
    <div id="widget-root" />
  </>
);

Actions as Form Action

Pass an async function to action on <form> for progressive enhancement style mutations on the client (and servers in RSC apps).

async function createItem(formData: FormData) {
  "use server"; // in Server Actions environments
  await db.item.create({ name: String(formData.get("name")) });
}
return <form action={createItem}>…</form>;

Error Handling with Error Boundaries

Class error boundaries still catch render errors in children. Pair them with route-level fallbacks for resilient trees.

class Boundary extends React.Component<
  { children: React.ReactNode; fallback: React.ReactNode },
  { error: Error | null }
> {
  state = { error: null as Error | null };
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
  render() {
    return this.state.error ? this.props.fallback : this.props.children;
  }
}

Activity and Visibility Patterns

Prefer patterns that hide UI without losing state when your React version exposes Activity-style primitives; otherwise keep state in parents while toggling CSS or conditional render carefully.

// Keep expensive tab state mounted when switching tabs if remount cost is high:
{tabs.map((t) => (
  <div key={t.id} hidden={t.id !== active}>{t.panel}</div>
))}

Improved Hydration Mismatch Logs

When text differs between server and client, fix the source (dates, locale, random) instead of silencing warnings. Use suppressHydrationWarning only for known clock text.

<time suppressHydrationWarning>{new Date().toLocaleString()}</time>

Cleanup of Deprecated APIs

Prefer function components and hooks over legacy propTypes, string refs, and old context APIs. Migrate off deprecated ReactDOM render APIs to createRoot.

import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render(<App />);

Server-Friendly Client Boundaries

In RSC apps, keep "use client" islands small. Fetch on the server when possible; pass serializable props into client widgets.

// Client island
"use client";
export function LikeButton({ id }: { id: string }) {
  return <button type="button" onClick={() => like(id)}>Like</button>;
}

Forms and Controlled Inputs - classic controlled patterns alongside actions
Performance Idioms - transitions pair well with concurrent forms
TypeScript with React - typing actions and event handlers

react.dev/reference - pure API reference (Hooks, built-in components, directives)
react.dev - official React docs (Learn + full API reference)
This Week in React - curated weekly React news

Stack versions: React 19 · TypeScript (strict) · App Router / RSC where noted

React 19 APIs

Buscar na documentação

React 19 APIs