<Activity> isn't preserving component state when hidden (React 19.2)
State only survives inside `<Activity mode="hidden">` if the hidden subtree stays mounted in the same position in the tree — changing its `key`, conditionally rendering it out entirely instead of toggling `mode`, or nesting it under a component that itself unmounts will all reset it just like a normal unmount would.
What causes this error
<Activity> keeps a subtree's state and DOM alive while visually hidden by toggling its `mode` prop between `"visible"` and `"hidden"` — it does not remount the tree. If instead you conditionally render the child in and out of the tree (`{show && <Panel />}`), or change its `key`, React treats that as a genuine unmount/remount and all local state resets, defeating the point of using `<Activity>` at all.
The Fix
// Wrong — conditionally rendering the child out entirely
{isVisible && <Activity mode="visible"><Panel /></Activity>}
// Fix — keep Activity itself always mounted, only toggle its mode
<Activity mode={isVisible ? 'visible' : 'hidden'}>
<Panel />
</Activity>Common causes / variations
- Wrapping the `<Activity>` element itself in a conditional instead of only toggling its `mode` prop
- Changing the `key` on the hidden subtree between renders (e.g. a key derived from a changing prop)
- A parent higher up the tree unmounting for an unrelated reason, taking the `<Activity>` boundary down with it
Related errors
See also: useEffect runs twice in development, cache() called outside a request (RSC).
Comments
Loading comments...