Skip to content
← Journal · Web Design and Development · 3 min

What's New in React 19: The 2026 Guide for Real Projects

React 19 shipped in December 2024, and by 2026 it is simply what React is: Actions for data mutations, the `use()` API, `ref` as a regular prop, stable Server Components, and (as a separate but related release) the React Compiler, which reached stable and retired most manual memoization. If your codebase or your mental model is still on React 18 patterns, this is the practical tour of what changed, with code, and what is actually worth migrating.

Actions: forms and mutations, finally first-class

Actions let you pass an async function directly to a form, and React manages the submission lifecycle: pending state, errors, and optimistic updates, through `useActionState`, `useFormStatus`, and `useOptimistic`.

components/RenameForm.tsxtsx
import { useActionState } from "react";

export default function RenameForm({ save }) {
  const [error, submitAction, isPending] = useActionState(
    async (prev, formData) => {
      const err = await save(formData.get("name"));
      return err ?? null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input name="name" />
      <button disabled={isPending}>Rename</button>
      {error && <p>{error}</p>}
    </form>
  );
}

The boilerplate this replaces (hand-rolled `isSubmitting` state, manual error plumbing, disabled-button bookkeeping) was the most-duplicated code in every React app. It is gone now.

The use() API

`use()` reads a promise or a context inside render, and unlike hooks it works conditionally:

components/Comments.tsxtsx
import { use, Suspense } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map((c) => <p key={c.id}>{c.text}</p>);
}

export default function Page({ commentsPromise }) {
  return (
    <Suspense fallback={<p>Loading comments...</p>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

`use(Context)` also supersedes `useContext`, and providers simplify with it: you can render `<ThemeContext value="dark">` directly instead of `<ThemeContext.Provider>`.

ref is just a prop now

`forwardRef` is no longer necessary; function components accept `ref` like any other prop:

components/Input.tsxtsx
function TextInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

Codemods handle most of the migration, and `forwardRef` still works while you get there.

Server Components and Server Actions, stable

React 19 stabilized the architecture frameworks had been previewing: components that run only on the server (zero client bundle cost) and `"use server"` functions callable from the client. In practice most teams consume these through Next.js, where the App Router builds on exactly this foundation; our guide to handling images in Next.js shows the framework side of the same platform.

Quality-of-life wins

  • Document metadata: render `<title>` and `<meta>` inside components; React hoists them to `<head>`.
  • Better hydration errors: actionable diffs instead of cryptic mismatches.
  • Web Components support: custom elements finally behave.
  • Stylesheets and scripts: first-class support for loading order with `precedence`.

The React Compiler: goodbye manual memoization

The compiler (stable as of late 2025, after proving itself in production at Meta) automatically memoizes components and values, which retires the `useMemo` / `useCallback` / `memo` ritual for most code:

before-and-after.tsxtsx
// React 18 era: manual memoization
const total = useMemo(() => items.reduce(sum), [items]);
const onSelect = useCallback((id) => setSelected(id), []);

// Compiler era: just write it
const total = items.reduce(sum);
const onSelect = (id) => setSelected(id);

This restores React's original promise: you declare what the UI is, and the toolchain worries about how to render it efficiently. New projects should turn the compiler on from day one; existing codebases can adopt incrementally and delete memoization as it verifies.

Should you upgrade in 2026?

If you are on React 18: yes, deliberately rather than urgently. The upgrade path is well-worn (React 18.3 warned about most breaking changes), codemods cover `forwardRef` and prop-types removal, and every ecosystem library that matters now targets 19. If you are starting anything new on 18-era patterns, stop; you would be writing migration debt on purpose. The step-by-step of a modern web build, stack choice included, is in our web application development process guide.

Frequently asked questions

Is React 19 stable?

Yes, since December 2024, with point releases through 2025 and 2026. The React Compiler is stable separately as of late 2025.

Do I still need useMemo and useCallback in React 19?

With the React Compiler enabled, mostly no: it memoizes automatically. Without the compiler, the hooks still work and still apply to genuinely expensive computations.

What replaced forwardRef in React 19?

Nothing needed to: `ref` is now an ordinary prop on function components. `forwardRef` still functions for backward compatibility, and a codemod removes it.

The bottom line

React 19 removed the ceremony that had accumulated around React: submission state, memoization bookkeeping, ref forwarding, context plumbing. In 2026 the platform question is settled and the practical question is whether your codebase has caught up to it. Ours has; if you want yours there too, our web development team migrates and builds on React 19 daily.

Work with us

React apps built on the current platform

Coding Crafts ships production React and Next.js applications using React 19, Server Components, and the React Compiler where they genuinely help. Senior engineers at $25 to $49 per hour.

Talk to Coding CraftsHire React Developers
Hakeem Abbas
Written by
Hakeem Abbas
Software Engineer at Coding Crafts