React 19.3 — View Transitions go stable

React 19.3 shipped on September 9. It makes two APIs stable that were previously only in React's experimental builds: <ViewTransition> and Fragment Refs. It adds no breaking changes.

View Transitions

<ViewTransition> connects React to the browser's View Transition API. Wrap an element and React animates it when it appears, disappears or changes. It only animates updates marked as Transitions, such as startTransition, a Suspense boundary showing its content, and useDeferredValue. Ordinary state updates still apply instantly.

React picks one of four animations based on what changed in the tree: enter, exit, update, or share, when an element with the same name disappears in one place and appears in another.

This site uses both patterns. Every page change is one <ViewTransition>, keyed by the URL:

<ViewTransition key={pathname} enter="page-enter" exit="page-exit" default="none">
  <div>{children}</div>
</ViewTransition>

page-enter and page-exit are CSS classes, styled through ::view-transition-new(.page-enter) and friends. The project covers in our work use share: the card and the case-study hero share a name, so the browser morphs one into the other:

<ViewTransition name={`work-${project.slug}`} share="morph" default="none">

No animation library and no measuring element positions in JavaScript. The browser does the work.

Animating by cause

The new addTransitionType tags why a transition happened, so the same change can animate differently:

startTransition(() => {
  addTransitionType('next')
  setSlide(s => s + 1)
})

<ViewTransition enter={{ next: 'from-right', previous: 'from-left' }}>
  <Slide />
</ViewTransition>

Wrapping a <Suspense> boundary with update="auto" default="none" gives a smooth fallback-to-content swap, and images and fonts inside a <ViewTransition> now wait for loading the same way data does.

Fragment Refs

A ref on <Fragment> controls a group of sibling elements without a wrapper div. It can focus them, add event listeners, or watch them with an IntersectionObserver through observeUsing. This is useful for "reveal on scroll" wrappers that should not add extra elements to the page.

The rest

• browser() from react-dom skips a component during server rendering: use(browser()) makes the server send the fallback and render the component only in the browser.
• Trusted Types: React no longer turns TrustedHTML and similar objects into strings, so sites that require Trusted Types in their Content Security Policy can use React.
• Context in Server Components: render <UserContext value={user}> directly from a Server Component, with no client wrapper.
• One slow Transition no longer blocks unrelated ones.

Bottom line

Upgrade. It is a minor version with no breaking changes. If you have been using ViewTransition from react@canary or unstable_ViewTransition, switch to the stable export. If you haven't tried it, page transitions and shared-element morphs are now a few lines of JSX and CSS.