diff --git a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
index 7f1d1c5db0729..e82ef6eff44ce 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
+++ b/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(, portalContainer);
+ }
+
+ function App() {
+ return (
+ }>
+
+
+
+ );
+ }
+
+ ReactDOM.render(, 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 (
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 02b525a12391f..2d337e24b44da 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/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) {