Introduction

React 19 represents a major paradigm shift for frontend development.

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

This 가이드 highlights the most important 기능 in React 19, offering practical code examples and upgrading 팁 to clean up your codebase.

1. Simplification of Async State with the Actions API

A standout 기능 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 업데이트 the UI instantly before the 서버 request completes, with built-in rollback capabilities if the request fails.

2. Resource 해상도 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 서버 Environments

With 서버 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 기능 like useState or useEffect.
• "use server": Marks functions that execute on the 서버 (서버 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 해상도.

Deprecating forwardRef and adopting useActionState are great opportunities to clean up your component codebase. Refer to the official React 19 업그레이드 가이드 to plan your transition.