React Activity: When A Render No Longer Guarantees an Effect

https://hackernoon.imgix.net/images/2jqChkrv03exBUgkLrDzIbfM99q2-nl822g7.jpeg

React 19.2 introduced <Activity> as a powerful way to hide UI while preserving its state and DOM. But beneath this seemingly simple feature is an important lifecycle shift: a component can render without its Effects ever mounting. That difference can expose hidden bugs in legacy code: from subscriptions created during render to cleanup logic tied too closely to component visibility.

In this article, we explore what React Activity changes, why StrictMode matters, and what to check before making <Activity> part of your application.

React 19.2 introduced <Activity> - an API that lets you hide UI while preserving its state and DOM.

{isActive && <Tab />}

turns into:

<Activity mode={isActive ? 'visible' : 'hidden'}> <Tab /></Activity>

We recently replaced a conditional render with Activity in one of our projects. A little later we noticed that something was leaking. At first I suspected Activity, because that was the obvious recent change. It...

Copyright of this story solely belongs to hackernoon.com. To see the full text click HERE

Read more