Chapter 71: ViewTransition
Core Idea
<ViewTransition> wires a subtree into the browser's native View Transitions API, letting React coordinate smooth, animated transitions between two UI states (a navigation, a layout change) without hand-rolling animation logic.
Key Concepts
- Wraps content that should animate as a unit when the UI it's part of changes — React coordinates capturing the "before" and "after" visual states and lets the browser interpolate between them via the native View Transitions API rather than a JS animation library.
- Works with React's update model: because it's a React component, it composes with transitions (
useTransition, Ch 65), Suspense boundaries, and the rest of the rendering model — the animated change can be driven by ordinary state updates rather than an imperative animation trigger.
- Browser-API dependent: relies on the underlying browser's View Transitions support — it's a coordination layer over that native capability, not a from-scratch animation engine implemented in JS.
- Distinct from CSS transitions on
data-state (the Radix/Base-UI style pattern) — this is React's own primitive for orchestrating transitions specifically around React-driven UI changes (route changes, list reorders, layout shifts), using the browser's dedicated transition API rather than manually keyed CSS animations.
Key Takeaways
- Reach for this when a state-driven UI change (navigation, reorder, expand/collapse) should visually animate smoothly rather than snap, and you want the browser's native transition machinery doing the interpolation.
- It composes with
useTransition and Suspense rather than replacing either — it's specifically about the visual transition, not about data-loading coordination.
- Actual browser support for the underlying View Transitions API is a prerequisite — this component is a React-idiomatic wrapper around that browser capability, not an independent polyfill.
Connects To
- Ch 65 (useTransition): the state-transition mechanism this component's animations typically accompany.
- Ch 70 (Suspense): the loading-coordination boundary often combined with animated transitions.