Only hide outermost host nodes when Offscreen is hidden

facebook · Apr 13, 2021 · 70678d2 · 70678d2
1 parent 84c06fe
commit 70678d2
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1027,14 +1027,18 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
   const current = finishedWork.alternate;
   const wasHidden = current !== null && current.memoizedState !== null;
 
+  // Only hide the top-most host nodes.
+  let hiddenHostSubtreeRoot = null;
+
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
     // children to find all the terminal nodes.
     let node: Fiber = finishedWork;
     while (true) {
       if (node.tag === HostComponent) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
+          hiddenHostSubtreeRoot = node;
           hideInstance(instance);
         } else {
           unhideInstance(node.stateNode, node.memoizedProps);
@@ -1060,7 +1064,7 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         }
       } else if (node.tag === HostText) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
           hideTextInstance(instance);
         } else {
           unhideTextInstance(instance, node.memoizedProps);
@@ -1133,8 +1137,18 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         if (node.return === null || node.return === finishedWork) {
           return;
         }
+
+        if (hiddenHostSubtreeRoot === node) {
+          hiddenHostSubtreeRoot = null;
+        }
+
         node = node.return;
       }
+
+      if (hiddenHostSubtreeRoot === node) {
+        hiddenHostSubtreeRoot = null;
+      }
+
       node.sibling.return = node.return;
       node = node.sibling;
     }

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1027,14 +1027,18 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
   const current = finishedWork.alternate;
   const wasHidden = current !== null && current.memoizedState !== null;
 
+  // Only hide the top-most host nodes.
+  let hiddenHostSubtreeRoot = null;
+
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
     // children to find all the terminal nodes.
     let node: Fiber = finishedWork;
     while (true) {
       if (node.tag === HostComponent) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
+          hiddenHostSubtreeRoot = node;
           hideInstance(instance);
         } else {
           unhideInstance(node.stateNode, node.memoizedProps);
@@ -1060,7 +1064,7 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         }
       } else if (node.tag === HostText) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
           hideTextInstance(instance);
         } else {
           unhideTextInstance(instance, node.memoizedProps);
@@ -1133,8 +1137,18 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         if (node.return === null || node.return === finishedWork) {
           return;
         }
+
+        if (hiddenHostSubtreeRoot === node) {
+          hiddenHostSubtreeRoot = null;
+        }
+
         node = node.return;
       }
+
+      if (hiddenHostSubtreeRoot === node) {
+        hiddenHostSubtreeRoot = null;
+      }
+
       node.sibling.return = node.return;
       node = node.sibling;
     }

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -906,7 +906,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
       expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer', [spanHidden('Inner')]),
+        spanHidden('Outer', [span('Inner')]),
         span('Fallback'),
       ]);
 
@@ -1023,7 +1023,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
       expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer', [spanHidden('MemoizedInner')]),
+        spanHidden('Outer', [span('MemoizedInner')]),
         span('Fallback'),
       ]);