Activity mode=“hidden” does not hide nested portals

[ceolinwill]

React's <Activity> component does not hide portals when they are nested under another element. Only direct portal children are hidden, causing inconsistent behavior.

React version: 19.2.0

Steps To Reproduce

1. Wrap a parent <div> inside <Activity mode="hidden">
2. Inside that <div>, render any regular child and a portal via createPortal(...)
3. Observe: regular child is hidden but the portal remains visible
4. Remove the additional wrapper and observe that the portal is now hidden correctly

Link to code example: https://codesandbox.io/p/sandbox/hwt3pl

Minimal reproduction:

import { createPortal } from "react-dom";
import { Activity } from "react";

export default function App() {
  return (
    <Activity mode="hidden">
      <div>
        <h1>Hello</h1>
        {createPortal(<p>Portal child (should be hidden)</p>, document.body)}
      </div>
    </Activity>
  );
}

The current behavior

Portals nested within another element inside remain visible when Activity is in “hidden” mode.

The expected behavior

All children of an element, including portals nested at any depth, should be hidden and restored consistently when using “hidden” mode.

---

Notes

Not sure if this is a bug or expected behavior, though. But I feel like we should either find a way to hide the portal or update the docs to mention this on the "unwanted side effects" section. Thoughts?

[amintai]

Activity component (formerly related to offscreen rendering ideas) manages visibility rather than mounting/unmounting.
When mode="hidden", React keeps the component tree mounted but doesn’t commit updates to the visible DOM subtree.

However, portals are a special case — they’re rendered outside the parent’s DOM hierarchy (even though they remain part of the React tree logically).

React treats:

• <div> and its normal children as part of the hidden subtree — no DOM updates.
• The portal, however, is rendered into a different container (document.body), and React doesn’t automatically apply “hidden mode” semantics to that DOM subtree because it’s considered outside the Activity boundary.

So the portal continues to render even when its logical parent is hidden.

This is a gray area, but I’d argue it’s a bug.

[icyJoseph]

Gray area indeed, I understand point 2, but there's cases where it doesn't apply, When Activity is the direct parent of the portal, for example, in the sandbox in OPs, add a portal as sibling to the div, and it'll be hidden too:

    <Activity mode="hidden">
      <div>
        <h1>Hello CodeSandbox</h1>

        {createPortal(
          <p>This child is placed in the document body.</p>,
          document.body
        )}
      </div>
      {createPortal(
        <p>This OTHER child is placed in the document body.</p>,
        document.body
      )}
    </Activity>

You can also replace replace the div with a Fragment:

    <Activity mode="hidden">
      <>
        <h1>Hello CodeSandbox</h1>
        {createPortal(
          <p>This child is placed in the document body.</p>,
          document.body
        )}
      </>
      {createPortal(
        <p>This OTHER child is placed in the document body.</p>,
        document.body
      )}
    </Activity>

And everything is hidden now. Likely this just reveals some implementation details of Activity and Portals, but yeah - we need core team input here. The display none is also applied to the p tag, not the body.