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
Guide to Scroll‑Driven Animations with CSS
Jun 26, 2025
Guide to Scroll‑Driven Animations with CSS CSS animations can now be linked to user scrolling without any JavaScript — just pure CSS. 1. Thr...
Using Web Components the Smart Way
Jul 06, 2025
Using Web Components the Smart Way A lot of developers assume Web Components are meant to replace full SPA frameworks like React or Vue. But in rea...
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 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...
Laravel Queue & Job System: From Table Creation to Production Deployment
Jul 01, 2025
🚀 Laravel Queue & Job System We’re gonna walk you through Laravel queues from setup to deploying in production using Supervisor. Step 1...
Laravel 12.18.0 Update
Jun 17, 2025
Laravel 12.18.0 Update The Laravel team released version 12.18.0 with several cool updates: String encrypt() & decrypt() helpers are...
