Activity in React: Hide UI Without Losing State

#State Management #React #Experimental

What is <Activity>?

<Activity> is a new experimental React component that helps you hide parts of your app without losing their state like what the user typed in a search box or which video they were watching.

Normally, when you switch pages in a React app, the old page disappears completely. If you go back, it starts fresh—like a blank form. But with <Activity>, React keeps the hidden page “alive” in the background, so when you return, everything is just as you left it.

How does it work?

You wrap a part of your app in <Activity> and tell it whether it should be:

  • visible → show it normally
  • hidden → hide it, but keep its state saved
<Activity mode={isVisible ? "visible" : "hidden"}>
  <MyPage />
</Activity>

Even when hidden, React still renders it quietly (at low priority), so it’s ready to come back instantly.

💡 Why is this useful?

  1. Better user experience:

    • Go back to a search page → your search text is still there.
    • Switch between tabs → your scroll position or form inputs stay intact.

  2. Pre-load future pages:
    You can pre-render a page the user might visit next (like a video detail page) while they’re still on the current one—so it loads instantly!

  3. Works well with animations:
    It pairs nicely with View Transitions (another new feature) to make smooth page switches that feel fast and seamless.

  4. Smart with performance:
    Hidden <Activity> parts don’t slow down the visible page. React gives them lower priority and even skips sending them in server-rendered HTML if they’re hidden.

🛠️ Real-life example

Imagine you:

  • Type “React” in a search box
  • Click a video → go to details page
  • Click “Back”

Without <Activity>: Search box is empty again 😕
With <Activity>: Search box still says “React” 😊

⚠️ Important note

This is still experimental (not ready for production yet), so you’d need to use react@experimental to try it. The API might change based on feedback.

In short:

<Activity> lets you hide parts of your app without “forgetting” what the user did—like pausing a game instead of restarting it.

References