React 19.3 – React

September 9, 2026 by The React Team
React 19.3 is now available on npm!
Last year, we shared View Transitions and Fragment Refs as new experimental APIs coming to React. We’re excited to announce that both of these are now stable in React 19.3!
In this post, we’ll go over how they work, and also cover some other notable changes in this release.
The new <ViewTransition> component lets you animate elements as they enter, exit, move, or resize using the browser’s View Transition API. We shared it as an experimental API last year, and in 19.3 it’s stable and ready to use.
To animate part of your UI, wrap it in <ViewTransition>:
Now, whenever an update marked as a Transition changes the child component’s style, or causes the ViewTransition to be mounted or unmounted, React will animate that update.
React chooses which animation to run based on how the tree changed:
Note that updates not marked as Transitions don’t trigger animations, as those are meant to be urgent and reflected immediately in the UI. State updates inside of startTransition, a <Suspense> reveal, or an update from useDeferredValue all cause a View Transition to animate.
Here’s a simple example of an enter/exit animation:
By default, <ViewTransition> animates with a smooth cross-fade. You can customize each kind of animation by passing a View Transition Class and defining the animation in CSS, or you can use the Web Animations API to trigger animations imperatively with the event props (onEnter, onExit, onShare, onUpdate).
Currently, <ViewTransition> only works in the DOM. We’re working on support for React Native and other platforms.
For more, see the <ViewTransition> docs.
Sometimes, you’ll want to customize which animation is used for the same state update. For example, navigating a carousel forward to the third slide should animate the slides right-to-left, while navigating it backward should animate them left-to-right, even though both actions set the currentSlide to 3.
You can customize the animation for a given View Transition by calling addTransitionType alongside the state update. This lets you add more information about the cause of a particular transition:
Then, you can specify different animations based on that transition type:
React also adds every Transition Type to the element as a browser view transition type, so you can scope animations in CSS with :active-view-transition-type(...).
To learn more, see the addTransitionType docs.
One of the most exciting things about View Transitions in React is how they integrate with Suspense.
You can animate a Suspense boundary as it reveals its children by wrapping it in <ViewTransition>:
When the children finish loading, React will trigger an update animation from the fallback to the final content.
Here’s an example. Try pressing ➕ to render a LazyVideo that suspends the first time it’s rendered:
While this works, you’ll notice that the video also animates in and out on subsequent reveals, even though it’s already been loaded. (You might also notice that the fallback fades in the first time it’s shown.)
In general, animations with Suspense work best when they’re used sparingly, and avoided for cached UI that would otherwise appear instantly.
Here are some principles for achieving good UX when animating with Suspense:
This keeps your app feeling snappy when things are already loaded, and only uses animation to make the update from fallback to final content more seamless.
To fix our example above, we can disable all animations other than updates:
Let’s see how it behaves now:
Notice how the fallback appears immediately when tapping the button, which keeps our UI feeling responsive to user actions. Additionally, once the video has been loaded, toggling it is instant.
There are other patterns you can use depending on what effect you want to achieve. To learn more, check out the docs on animating with Suspense.
In addition to animating fallbacks, View Transitions act as a way to opt images or fonts into triggering Suspense while they load.
This lets you avoid the browser’s default behavior where images or fonts may flicker in whenever they happen to finish loading, and instead build coordinated loading sequences that consider all of a component’s resources.
Wrap images or fonts inside of <ViewTransition> to trigger Suspense while they load:
Here’s an example of a component that suspends until its data, image, and font have all loaded:
To learn more about waiting for images, fonts, or stylesheets to load, see the Suspense docs.
When you need lower-level control over a component’s DOM nodes—for example to attach an event listener, observe visibility, or move focus—you can usually use a ref. But there are some situations where this is difficult:
Adding a wrapper <div> just to hold a ref sometimes works, but it can also interfere with your component’s styling or layout. Moreover, if a component doesn’t expose a ref prop, you would need to modify that component to do so, which might be impossible if it comes from a library you don’t control.
Fragment Refs solve these problems by providing a limited set of commonly used DOM methods that work with any React component, regardless of what it renders.
In 19.3, you can use them by passing a ref directly to a <Fragment>. This ref gives you a FragmentInstance, which you can use to work with the Fragment’s DOM children:
The FragmentInstance operates on the children’s DOM as a group, without changing its structure: