Recently, the React team released an update introducing several exciting features, but the one that stood out to me the most - and will likely become a staple in many React applications - is the new <Activity> component.

<Activity> lets you hide and restore the UI and internal state of its children.

The description seems simple enough, but let’s dig a bit deeper to make it really “click” for you - and maybe convince you to bump your app’s React version to try it out.

Usage

<Activity mode={visibility}>
  <Sidebar />
</Activity>

Personally, I would name this component <Visibility> since I think it better describes what it does. But let’s move on and explore it in action.

Previously, to conditionally render a component, you might write something like:

{isSidebarVisible && <Sidebar />}

Pretty standard, right? Most of us have written that dozens of times.

However, this approach comes with some drawbacks:

• Each change in isSidebarVisible mounts or unmounts the component from the DOM.
• When a component unmounts, its internal state (e.g., useState, refs, etc.) is destroyed and re-created on mount.

This isn’t ideal, especially for large components where remounting can be costly.

<aside> 💡

The problems to solve:

• Avoid destroying DOM of hidden components
• Preserve state while hiding components </aside>

How React solves this: