React 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’s startViewTransition API. Triggers include startTransition, 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.