update hideOrUnhideAllChildren to hide portals that aren't wrapped in…

… a host component (#16992)

Currently, when a node suspends, if its subtree contains a portal, the portal is not hidden. This hides portals in the subtree when it's not wrapped in a host component .

packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js

@@ -104,6 +104,29 @@ describe('ReactDOMSuspensePlaceholder', () => {
     expect(window.getComputedStyle(divs[2].current).display).toEqual('inline');
   });
 
+  it('hides and unhides child portals', async () => {
+    const portalContainer = document.createElement('div');
+    function Component() {
+      return ReactDOM.createPortal(<span />, portalContainer);
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText ms={500} text="A" />
+          <Component />
+        </Suspense>
+      );
+    }
+
+    ReactDOM.render(<App />, container);
+    expect(window.getComputedStyle(portalContainer).display).toEqual('none');
+
+    await advanceTimers(500);
+    Scheduler.unstable_flushAll();
+    expect(window.getComputedStyle(portalContainer).display).toEqual('block');
+  });
+
   it('hides and unhides timed out text nodes', async () => {
     function App() {
       return (

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -645,6 +645,13 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         } else {
           unhideInstance(node.stateNode, node.memoizedProps);
         }
+      } else if (node.tag === HostPortal) {
+        const instance = node.stateNode.containerInfo;
+        if (isHidden) {
+          hideInstance(instance);
+        } else {
+          unhideInstance(instance, node.memoizedProps);
+        }
       } else if (node.tag === HostText) {
         const instance = node.stateNode;
         if (isHidden) {