React Activity Component

The React Activity component allows you to render parts of your UI in a hidden mode (mode="hidden"), meaning the children components are rendered but not visible. This pre-renders the UI at a lower priority, preparing it before the user interacts with it. When the mode switches to "visible", the component becomes visible instantly without the usual loading delay. Importantly, when hidden, React unmounts the effects and cleans up resources but preserves the React state so that when shown again, the component resumes seamlessly without losing user input or state[2][3].

Why Use React Activity?

• Reduce perceived loading times: Pre-render likely next UI states, such as tabs or pages, so switching feels instantaneous.
• Preserve component state: Unlike unmounting, the Activity component saves state, preventing loss of form inputs or media playback positions.
• Optimize resource usage: Effects and event listeners are cleaned up when hidden, reducing unnecessary work.
• Simplify UI transitions: Manage visibility without complex manual state handling or conditional rendering.

React Activity Component: Real-World Examples

1. Pre-rendering Tabs with Data Fetching

Imagine a tabbed interface where clicking a tab fetches data asynchronously. Normally, switching tabs causes a loading delay. Using “ for inactive tabs pre-renders them, so when the user clicks, the tab content is ready instantly.

import { useTransition } from 'react';
import { Activity } from 'react';

function PostsTab() {
  const posts = use(fetchPosts());
  return <div>{posts.map(post => <Post key={post.id} post={post} />)}</div>;
}

function Tabs() {
  const [activeTab, setActiveTab] = React.useState('home');
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <button onClick={() => startTransition(() => setActiveTab('home'))}>
        Home
      </button>
      <button onClick={() => startTransition(() => setActiveTab('posts'))}>
        Posts
      </button>

      <Activity mode={activeTab === 'home' ? 'visible' : 'hidden'}>
        <HomeTab />
      </Activity>
      <Activity mode={activeTab === 'posts' ? 'visible' : 'hidden'}>
        <PostsTab />
      </Activity>
    </>
  );
}

Here, the PostsTab is pre-rendered but hidden until the user selects it, reducing waiting time and improving UX[2].

2. Preserving Form State Across Views

In multi-step forms or tabbed forms, users often lose input when switching tabs if components unmount. Using Activity, you can hide the inactive form step but keep its state intact.

function MultiStepForm() {
  const [step, setStep] = React.useState(1);

  return (
    <>
      <button onClick={() => setStep(1)}>Step 1</button>
      <button onClick={() => setStep(2)}>Step 2</button>

      <Activity mode={step === 1 ? 'visible' : 'hidden'}>
        <StepOneForm />
      </Activity>
      <Activity mode={step === 2 ? 'visible' : 'hidden'}>
        <StepTwoForm />
      </Activity>
    </>
  );
}

Even when hidden, the form inputs remain preserved, avoiding frustrating user experience[3].

3. Video Player Tabs with Playback Preservation

For media-heavy apps, switching between video tabs usually resets playback. With Activity, you can keep the video state alive while hidden, so when users return to a tab, the video resumes instead of restarting.

function VideoTabs() {
  const [active, setActive] = React.useState('video1');

  return (
    <>
      <button onClick={() => setActive('video1')}>Video 1</button>
      <button onClick={() => setActive('video2')}>Video 2</button>

      <Activity mode={active === 'video1' ? 'visible' : 'hidden'}>
        <VideoPlayer src="video1.mp4" />
      </Activity>
      <Activity mode={active === 'video2' ? 'visible' : 'hidden'}>
        <VideoPlayer src="video2.mp4" />
      </Activity>
    </>
  );
}

This approach improves resource management and user experience by avoiding reloading and restarting videos unnecessarily[3].

Summary

The React Activity component is a powerful new tool for improving UI responsiveness by pre-rendering hidden parts of your app and preserving their state. It is particularly useful for:

• Tabbed interfaces with data fetching
• Multi-step forms where input preservation is critical
• Media apps requiring playback state retention

By adopting Activity in your React projects, you can create smoother, faster, and more user-friendly interfaces with less boilerplate and complexity.