1. Home
2. web
3. React 19 Official Release and Practical Features Guide

Introduction

React 19 represents a major paradigm shift for frontend development.

Features that were previously restricted to meta-frameworks like Next.js—such as React Server Components (RSC) and the Actions API for form handling—are now officially integrated into the stable core React library.

This guide highlights the most important features in React 19, offering practical code examples and upgrading tips to clean up your codebase.

1. Simplification of Async State with the Actions API

A standout feature in React 19 is the introduction of Actions, designed to simplify managing asynchronous mutations, loader overlays, and form submissions.

Historically, tracking async requests required manually declaring states for pending status (isPending), success flags, and error responses. React 19 handles these status states automatically using standard hooks.

Form Submission with useActionState

import { useActionState } from 'react';

// Async form action handler
async function updateProfile(prevState, queryData) {
  try {
    await api.post("/profile", queryData);
    return { success: true, message: "Profile saved successfully!" };
  } catch (err) {
    return { success: false, message: err.message };
  }
}

function ProfileForm() {
  // state: return value from the action
  // formAction: handler passed to the HTML form action attribute
  // isPending: boolean tracking if the async action is currently executing
  const [state, formAction, isPending] = useActionState(updateProfile, null);

  return (
    <form action={formAction}>
      <input type="text" name="username" required />
      <button type="submit" disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>
      {state && <p>{state.message}</p>}
    </form>
  );
}

• useActionState (previously named useFormState during beta phases) links async handlers directly to native form attributes, automatically managing loading indicators.

Optimistic Updates with useOptimistic

For interactive actions like chat sends or “like” buttons, React 19 introduces useOptimistic. This allows you to update the UI instantly before the server request completes, with built-in rollback capabilities if the request fails.

2. Resource Resolution via the new use API

React 19 introduces use, a new hook-like API designed to resolve Promises and read Context values dynamically during rendering.

Unlike standard React hooks (like useEffect or useContext), use can be called conditionally (inside if statements) and within loops.

Resolving Promises in Render with Suspense

import { use, Suspense } from 'react';

// Promise defined outside rendering loop
const dataPromise = fetchData();

function Content() {
  // Directly read value from Promise inside render
  const data = use(dataPromise);
  return <div>Loaded Profile: {data.name}</div>;
}

function App() {
  return (
    // Render loading indicator until Promise resolves
    <Suspense fallback={<p>Loading profile...</p>}>
      <Content />
    </Suspense>
  );
}

• When you pass a Promise to the use API, React suspends rendering until the Promise resolves, delegating the loading state to the closest <Suspense> wrapper.

3. ref as a Standard Prop (Deprecating forwardRef)

A welcome quality-of-life change in React 19 is the simplification of reference passing (refs) into child components.

Previously, passing a ref down to a child element required wrapping components in forwardRef(), which added unnecessary boilerplate. In React 19, ref is treated as a standard property.

Streamlined Ref Syntax

// No forwardRef needed! Access 'ref' directly from props
function MyInput({ label, ref }) {
  return (
    <label>
      {label}
      <input ref={ref} />
    </label>
  );
}

// Parent rendering usage remains identical
function Parent() {
  const inputRef = useRef(null);
  return <MyInput label="Username" ref={inputRef} />;
}

4. Clear Boundaries for Client and Server Environments

With Server Components integrated into the library core, declaring environment execution rules at the file level is now standardized:

• "use client": Marks components that execute in the browser and use client features like useState or useEffect.
• "use server": Marks functions that execute on the server (Server Actions), preventing sensitive credentials or database queries from leaking to the client.

Conclusion

React 19 eliminates boilerplate code by automating async mutations, simplifying refs, and introducing native Promise resolution.

Deprecating forwardRef and adopting useActionState are great opportunities to clean up your component codebase. Refer to the official React 19 upgrade guide to plan your transition.