React Labs: View Transitions & Activity
June 17, 2025React Labs: View Transitions & Activity
Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental features in react@experimental
and react‑dom@experimental
:
- View Transitions: Wrap UI in
<ViewTransition>
to enable animations using the browser’sstartViewTransition
API. Triggers includestartTransition
,useDeferredValue
, and<Suspense>
. You can customize animations via CSS pseudo-selectors like::view-transition-old(*)
and::view-transition-new(*)
. - Activity: Use
<Activity mode={isVisible ? 'visible' : 'hidden'}>
to unmount UI while preserving state. Hidden components don’t run effects, but their state is saved and can be shown later, enabling state restoration and pre-rendering.
Other in-progress features:
- Performance tracks in React Profiler.
- Automatic injection of effect dependencies via the React compiler.
- IDE extension based on compiler for better diagnostics.
- Fragment refs to group multiple DOM elements.
- Gesture animation support (e.g., swipe transitions).
- Concurrent external store API using
use(store)
.
Example: Basic View Transition
// wrap pages to animate navigation
import { unstable_ViewTransition as ViewTransition } from 'react';
export default function App({ url }) {
return (
{url === '/' ? : }
);
}
Example: Preserving state with Activity
import { unstable_ViewTransition as ViewTransition, unstable_Activity as Activity } from 'react';
export default function App({ url }) {
return (
{url !== '/' && }
);
}
These experimental features are ready to try now in the experimental release; final APIs may change based on feedback.
Blog
React Hooks Complete Guide
Jul 01, 2025
🎣 Complete React Hooks Guide with Practical Examples 🧠 useState What it does: Adds local state to a function component. Code Example: impo...
Essential React Native UI & Interaction Components
Jul 01, 2025
Essential React Native UI & Interaction Components React Native provides a powerful set of built-in components for creating native mobile apps....
React Labs: View Transitions & Activity
Jun 17, 2025
React Labs: View Transitions & Activity Published April 23, 2025 by Ricky Hanlon. React Labs is sharing two new experimental featu...
Color Everything in CSS – Simple Guide
Jun 26, 2025
Color Everything in CSS – Simple Guide Today we’re diving into CSS colors: how to define them, especially with modern methods like lab(...
What’s New in ECMAScript 2025
Jun 30, 2025
What’s New in ECMAScript 2025 On June 25, 2025, Ecma International officially approved ES2025, adding several useful features: 1. 📦 Import At...
How OAuth Works
Jun 29, 2025
How OAuth Works OAuth is a protocol that allows third-party applications to access user data without sharing passwords. It's the backbone of secure a...
