React `<Activity />` Explained with Real UI Examples

React Explained with Real UI Examples

React's component is easy to misunderstand if you think of it as "just another way to hide things."

Its real value is narrower and more useful:

Activity lets you hide UI without throwing away the internal state of the hidden subtree.

That makes it very different from normal conditional rendering.

The official source for this post is:

• React docs

If you want the surrounding React cluster, also read:

• React useEffectEvent: When to Use It and When Not To
• React cacheSignal Explained for Server Components
• Why Next.js Feels Different from React (and Why It Matters)

The Core Difference from Conditional Rendering

Conditional rendering usually looks like this:

{isOpen ? <Sidebar /> : null}

That is perfectly fine when you want the subtree gone.

But it also means:

• the subtree unmounts
• internal state is lost
• effects clean up
• the UI rebuilds from scratch when it comes back

Activity gives you a different option:

<Activity mode={isOpen ? "visible" : "hidden"}>
  <Sidebar />
</Activity>

Now the UI can disappear visually while keeping its internal state.

That changes the feel of the experience.

Where Activity Is a Good Fit

1. Sidebars and drawers

If users open and close a sidebar repeatedly, it can be helpful to preserve:

• scroll position
• expanded groups
• draft input
• local component state

2. Tab panels with meaningful local state

Tabs often hold:

• filters
• draft form values
• selected items
• partially completed flows

If throwing that state away is annoying, Activity can be a better fit than unmounting.

3. Likely-next UI

The React docs also frame Activity around keeping content ready when it is likely to become visible again.

That is helpful when restoring the interface smoothly matters.

What Activity Changes in Practice

It helps to think of Activity as:

• visually hidden
• state preserved
• ready to return without a full rebuild

That is why the component is valuable.

It is not "more React magic."

It is a different choice about what happens when UI is not currently visible.

When Activity Is the Wrong Tool

1. When the hidden subtree should really go away

Sometimes unmounting is the right thing.

If the UI is not likely to return soon, or keeping the state would be confusing, conditional rendering is still the cleaner choice.

2. When preserving state creates hidden complexity

State preservation is not automatically good.

If the hidden UI comes back in a context where the old state is misleading, Activity can create subtle bugs in the user experience.

3. When you are using it as a performance superstition

Activity can help some interactions feel smoother, but it is not a universal performance switch.

Use it because the UI should keep its state while hidden, not because "preserve everything" sounds faster.

A Simple Decision Rule

Ask this:

When this UI disappears, should it come back as if the user never really left it?

If yes, Activity is worth considering.

If no, unmount it.

That one question usually makes the right call obvious.

Real UI Examples

Example: collapsible sidebar

Good fit when the user expects:

• open
• close
• reopen

and the same navigation state should still be there.

Example: tabbed settings form

Good fit when switching tabs should not erase incomplete work.

Example: temporary dashboard panels

Good fit when the panel is likely to come back and the user benefits from preserved local state.

The Biggest Mistake

The biggest mistake is treating Activity like a styling feature instead of a state-management decision.

Hiding UI while preserving state changes how the interface behaves.

That is a product decision, not just a rendering detail.

Related Reading

• React useEffectEvent: When to Use It and When Not To
• React cacheSignal Explained for Server Components
• Why Next.js Feels Different from React (and Why It Matters)

Need Help Choosing the Right UI Boundary?

If your React app is juggling tabs, drawers, step flows, and hidden panels that feel brittle or wasteful, contact me and I can help you choose the right composition and state boundaries.

Final Takeaway

is useful when UI should disappear without losing its internal state.

That makes it stronger than conditional rendering in some places and worse in others.

The right question is not "can Activity hide this?"

It is "should this UI come back with its state intact?"