React 19.3 new features explained with examples

Quick answer: React 19.3 (September 9, 2026) makes <ViewTransition> and Fragment refs stable, adds a browser() API for components that can only render in the browser, supports Trusted Types, lets Server Components render <Context>, and makes transitions render independently. The headline is native page and element animations with almost no code. A 19.3.1 patch followed on October 14, and Next.js 16.4 ships with 19.3.

Upgrade

npm install react@latest react-dom@latest

React 19.3 is a minor release. If you're on Next.js, upgrading to Next.js 16.4 brings it in automatically. See what's new in Next.js 16.4.

1. View Transitions (stable)

Browsers have a View Transition API that animates smoothly between two states of a page. React 19.3's <ViewTransition> component connects it to React updates, so elements can animate as they enter, exit, update or move, including shared-element effects between pages.

Animating a list update

import { ViewTransition, startTransition, useState } from "react";
 
function Gallery({ photos }: { photos: Photo[] }) {
  const [selected, setSelected] = useState<Photo | null>(null);
 
  return (
    <ViewTransition>
      {selected ? (
        <Detail photo={selected} onBack={() => startTransition(() => setSelected(null))} />
      ) : (
        <Grid photos={photos} onOpen={(p) => startTransition(() => setSelected(p))} />
      )}
    </ViewTransition>
  );
}

React animates updates that happen inside a transition (startTransition, useTransition, or framework navigations). By default you get a cross-fade; you customise the animation with CSS using the browser's ::view-transition-* pseudo-elements.

Why it matters: smooth, app-like navigation without an animation library, and the browser does the heavy lifting.

Tip: respect users who prefer less motion with @media (prefers-reduced-motion: reduce).

2. Fragment refs (stable)

Fragments (<>...</>) group elements without adding a wrapper <div>. Until now you couldn't attach a ref to them. In 19.3, a ref on a <Fragment> gives you a FragmentInstance that operates on all of the fragment's child DOM nodes as a group:

add or remove event listeners on all children,
move focus into the group,
use observers (for example IntersectionObserver),
measure the children's position and size.

It all works without changing your DOM structure, which is useful for design systems and layout components where an extra wrapper would break CSS.

3. `browser()`: client-only components done properly

Some components can't render meaningfully on the server: anything that needs window, the canvas, local storage or the user's screen size. Developers usually work around this with useEffect flags or dynamic imports.

React 19.3 adds browser() in react-dom. Using it in a component makes that component error during server rendering and resolve in the browser. The nearest <Suspense> fallback goes into the server HTML, and the real component renders after hydration. It's an official, explicit way to say "this part is browser-only", with proper loading states instead of hydration mismatches.

4. Trusted Types support

Trusted Types is a browser security feature that blocks dangerous strings from reaching risky DOM APIs (a major defence against cross-site scripting). Previously React converted values to strings before passing them to the DOM, which defeated Trusted Types policies. React now passes the values through unchanged, so sites enforcing Trusted Types work with React.

If you handle sensitive data, enabling Trusted Types through your Content Security Policy is now a realistic option for React apps.

5. Context in Server Components

You can now render <Context> directly in Server Components, which simplifies apps that provide configuration or theme values from the server.

6. Transitions render independently

Previously, one slow transition could hold up other, unrelated transitions. In 19.3, transitions render independently, so a slow update in one part of the page no longer delays others. Apps with several interactive areas feel more responsive without any code changes.

Other changes

Strict Mode double-invokes Effects during hydration, which surfaces bugs in effects that assume they run once.
A new warning for conditional use() calls.
"Form state" is renamed "action state" in useActionState error messages.

What to adopt first

Feature	Use it when
`<ViewTransition>`	You want smooth navigation or list animations
Fragment refs	You need focus, events or measurement without wrapper divs
`browser()`	A component needs `window` or other browser-only APIs
Trusted Types	You're hardening a security-sensitive app
Context in Server Components	You provide config or themes from the server

Frequently asked questions

When was React 19.3 released?

React 19.3 was released on September 9, 2026. A 19.3.1 patch release followed on October 14, 2026.

What is ViewTransition in React?

ViewTransition is a React component, stable in 19.3, that uses the browser's View Transition API to animate elements as they enter, exit, update or move during React transitions. Animations can be customised with CSS.

What are Fragment refs in React?

Fragment refs let you attach a ref to a Fragment. The ref gives you a FragmentInstance that can add event listeners, move focus, observe and measure all of the fragment's child DOM nodes as a group without adding a wrapper element.

What does browser() do in React 19.3?

browser() is a new react-dom API for components that can only render in the browser. It errors during server rendering so the Suspense fallback is sent in the HTML, and the component renders after hydration in the browser.

Is React 19.3 a breaking change?

No. React 19.3 is a minor release. Most apps can upgrade directly, though Strict Mode now double-invokes Effects during hydration, which may reveal existing bugs in development.

Does Next.js support React 19.3?

Yes. Next.js 16.4 ships with React 19.3.

React 19.3: the new features worth using today (with examples)