If you’ve been building React apps for a while, you know the classic pattern by heart:
isVisible && <MyComponent />
It’s simple, it works… and it comes with a really annoying downside: every time the component hides, its entire state gets wiped out.
Counters reset. Inputs lose their text. Cached data disappears.
We’ve all just accepted this as “how React works.”
Well, not anymore.
React’s new <Activity> component finally fixes this pain point but what most developers don’t realize is that preserving state is just the beginning. <Activity> quietly unlocks two extremely powerful performance techniques that weren’t possible before.
Let’s break down the three ways this new primitive is about to reshape the way you think about React starting with the obvious win and ending with two next-level optimizations that will make you look like a performance wizard.
1. Stop Losing Component State Every Time You Toggle Visibility
For years, hiding a component meant unmounting it. And unmounting meant losing everything inside it.
Your form? ➡️ Blank again.
Your counter? ➡️ Back to zero.
Your fetched data? ➡️ See you later.
<Activity> changes that. It lets you control visibility without unmounting the component.
import { Activity } from 'react';
function MyTogglableComponent({ isVisible }) {
const mode = isVisible ? 'visible' : 'hidden';
return (
<Activity mode={mode}>
<Counter />
</Activity>
);
}
When mode="hidden", your component:
- stays mounted
- keeps all its internal state
- keeps user input
- remembers everything
But here’s the clever part: side effects pause.
So while your component is “sleeping,” React won’t rerun effects or keep subscriptions active. When you make it visible again, it wakes up exactly where it left off.
This alone solves a decade old annoyance. But the next two features are where things get really interesting.
2. Preload Data Before Your User Even Asks For It
Think about a modal, a tab, or a panel that fetches data using Suspense. Normally, the fetch only begins when the user opens it. And then… they wait.
Now imagine wrapping that same component in an <Activity mode="hidden"> from the start.
What happens?
React goes:
“Okay, let me finish the important stuff first.
Then, when I have some idle time, I’ll go ahead and pre-render this hidden component.”
And during that pre-render?
Your data fetching kicks off early.
By the time the user clicks the button to reveal it, the data is often already loaded.
No spinner.
No delay.
Just instant UI.
This is a massive UX upgrade for anything you expect the user will eventually open:
- modals
- secondary tabs
- expandable panels
- sidebar content
You’re basically time traveling your loading state.
3. Make Your App Feel Faster With Smarter Hydration
If you’re building with something like Next.js, hydration is a big deal. It’s what makes your server rendered HTML come alive in the browser.
But hydration has a problem:
One slow component can block your whole page from becoming interactive.
For example, a heavy comments section at the bottom of a blog post can delay your entire page even the text at the top that should be usable immediately.
Wrapping low priority sections in <Activity> changes the game.
<Activity>
<Comments />
</Activity>
Even without any props, this tells React:
“Hey, treat this as a separate hydration task.
Focus on the important stuff first.”
The result:
- Your main UI becomes interactive much faster
- Lower priority content hydrates later, during browser idle time
- Users feel like the page loads instantly, even if a big component is still hydrating in the background
Profilers show two distinct hydration waves:
primary content first, secondary content later.
That’s a huge win for perceived performance.
Final Thoughts: <Activity> Is More Than a Component,It’s a New Rendering Primitive
<Activity> isn’t just a nicer way of hiding components.
It gives you fine grained control over:
- when components mount
- when they hydrate
- when they fetch data
- when they render
- and when they pause side effects
State preservation is the obvious benefit but the real power comes from the performance patterns it enables.
So take a look at your own app:
- Where are you re-fetching data unnecessarily?
- Where could users benefit from instant modal loads?
- What heavy components slow down hydration?
Because with a little strategic wrapping, <Activity> might be the biggest performance upgrade your React app gets this year.
Top comments (1)
Nice