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
Mastering Modern CSS: The Power of if(), Popover Hints, and Smart Styling
Jul 16, 2025
🌐 Mastering Modern CSS: The Power of if(), Popover Hints, and Smart Styling CSS is getting smarter. In this guide, we’ll explore how the new...
Mastering Laravel Context: Advanced Logging and Contextual Job Tracing
Jul 20, 2025
Laravel Context is one of the most powerful new features in Laravel 12. It allows you to attach contextual data (like user ID, IP address, request pat...
React History – A Professional Developer’s Perspective
Jul 26, 2025
1. Origins: Born Inside Facebook In 2011, Facebook engineers faced the increasing complexity of building interactive UIs at scale. They developed...
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(...
Mastering Laravel 12 Conditional Validation
Jul 07, 2025
Mastering Laravel 12 Conditional Validation Laravel 12's validation system is super powerful, and conditional validation makes your forms...
React Native 0.80 & ExecuTorch: A Powerful Leap into Offline AI for Mobile Apps
Jul 28, 2025
🚀 What’s New in React Native 0.80? The React Native 0.80 release marks a pivotal moment in mobile development. This update not only enhances...
