Fix: LegacyHidden should not toggle effects (#21928)

acdlite · web-flow · commit ae5d26154b1e · 2021-07-21T10:34:08.000-07:00
LegacyHidden is a transitional API that we added to replace the old
`&lt;div hidden={true} /&gt;` API that we used to use for pre-rendering. The
plan is to replace this with the Offscreen component, once it's ready.

The idea is that LegacyHidden has identical behavior to Offscreen except
that it doesn't change the behavior of effects. (Which is basically how
`&lt;div hidden={true} /&gt;` worked — it prerendered the hidden content in
the background, but nothing else.) That way, while we're rolling this
out, we could toggle the feature behind a feature flag either for
performance testing or as a kill switch.

It looks like we accidentally enabled the effects flag for both
Offscreen _and_ LegacyHidden. I suppose it's a good thing that nobody
has complained yet, since we eventually do want to ship this
behavior everywhere?

But I do think we should remove it from LegacyHidden, and roll it out by
gating the component type in the downstream repo. That way if there's an
issue related to the use of LegacyHidden, we can disable that without
disabling the behavior for Suspense boundaries.

In retrospect, I might have implemented this as an unstable prop on
Offscreen instead of a completely separate type — though at the time,
Offscreen didn't exist. I originally added LegacyHidden to unblock the
Lanes refactor, so I could move the deprioritization logic out of the
HostComponent implementation.

Not a big deal since we're going to remove this soon. The implementation
is almost the same regardless: before disconnecting or reconnecting
the effects, check the fiber tag. The rest of the logic is the same.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2131,8 +2131,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
         }
         break;
       }
-      case OffscreenComponent:
-      case LegacyHiddenComponent: {
+      case OffscreenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         const current = finishedWork.alternate;
@@ -2145,27 +2144,26 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);
         }
 
-        if (isHidden) {
-          if (!wasHidden) {
-            if (
-              enableSuspenseLayoutEffectSemantics &&
-              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
-            ) {
-              nextEffect = offscreenBoundary;
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
+                }
               }
             }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
+            }
           }
-        } else {
-          if (wasHidden) {
-            // TODO: Move re-appear call here for symmetry?
-          }
+          break;
         }
-        break;
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2131,8 +2131,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
         }
         break;
       }
-      case OffscreenComponent:
-      case LegacyHiddenComponent: {
+      case OffscreenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         const current = finishedWork.alternate;
@@ -2145,27 +2144,26 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);
         }
 
-        if (isHidden) {
-          if (!wasHidden) {
-            if (
-              enableSuspenseLayoutEffectSemantics &&
-              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
-            ) {
-              nextEffect = offscreenBoundary;
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
+                }
               }
             }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
+            }
           }
-        } else {
-          if (wasHidden) {
-            // TODO: Move re-appear call here for symmetry?
-          }
+          break;
         }
-        break;
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1361,7 +1361,9 @@ function completeWork(
         const prevIsHidden = prevState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
-          newProps.mode !== 'unstable-defer-without-hiding'
+          newProps.mode !== 'unstable-defer-without-hiding' &&
+          // LegacyHidden doesn't do any hiding — it only pre-renders.
+          workInProgress.tag !== LegacyHiddenComponent
         ) {
           workInProgress.flags |= Visibility;
         }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1361,7 +1361,9 @@ function completeWork(
         const prevIsHidden = prevState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
-          newProps.mode !== 'unstable-defer-without-hiding'
+          newProps.mode !== 'unstable-defer-without-hiding' &&
+          // LegacyHidden doesn't do any hiding — it only pre-renders.
+          workInProgress.tag !== LegacyHiddenComponent
         ) {
           workInProgress.flags |= Visibility;
         }
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -337,4 +337,52 @@ describe('ReactOffscreen', () => {
       expect(root).toMatchRenderedOutput(<span prop="Child" />);
     }
   });
+
+  // @gate experimental || www
+  it('does not toggle effects for LegacyHidden component', async () => {
+    // LegacyHidden is meant to be the same as offscreen except it doesn't
+    // do anything to effects. Only used by www, as a temporary migration step.
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Mount layout');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+
+    await act(async () => {
+      root.render(
+        <LegacyHidden mode="hidden">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    await act(async () => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    await act(async () => {
+      root.render(null);
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout']);
+  });
 });

Original file line number	Diff line number	Diff line change
`@@ -2131,8 +2131,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {`
`2131`	`2131`	`}`
`2132`	`2132`	`break;`
`2133`	`2133`	`}`
`2134`		`- case OffscreenComponent:`
`2135`		`- case LegacyHiddenComponent: {`
	`2134`	`+ case OffscreenComponent: {`
`2136`	`2135`	`const newState: OffscreenState \| null = finishedWork.memoizedState;`
`2137`	`2136`	`const isHidden = newState !== null;`
`2138`	`2137`	`const current = finishedWork.alternate;`
`@@ -2145,27 +2144,26 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {`
`2145`	`2144`	`hideOrUnhideAllChildren(offscreenBoundary, isHidden);`
`2146`	`2145`	`}`
`2147`	`2146`
`2148`		`- if (isHidden) {`
`2149`		`- if (!wasHidden) {`
`2150`		`- if (`
`2151`		`- enableSuspenseLayoutEffectSemantics &&`
`2152`		`- (offscreenBoundary.mode & ConcurrentMode) !== NoMode`
`2153`		`- ) {`
`2154`		`- nextEffect = offscreenBoundary;`
`2155`		`- let offscreenChild = offscreenBoundary.child;`
`2156`		`- while (offscreenChild !== null) {`
`2157`		`- nextEffect = offscreenChild;`
`2158`		`- disappearLayoutEffects_begin(offscreenChild);`
`2159`		`- offscreenChild = offscreenChild.sibling;`
	`2147`	`+ if (enableSuspenseLayoutEffectSemantics) {`
	`2148`	`+ if (isHidden) {`
	`2149`	`+ if (!wasHidden) {`
	`2150`	`+ if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {`
	`2151`	`+ nextEffect = offscreenBoundary;`
	`2152`	`+ let offscreenChild = offscreenBoundary.child;`
	`2153`	`+ while (offscreenChild !== null) {`
	`2154`	`+ nextEffect = offscreenChild;`
	`2155`	`+ disappearLayoutEffects_begin(offscreenChild);`
	`2156`	`+ offscreenChild = offscreenChild.sibling;`
	`2157`	`+ }`
`2160`	`2158`	`}`
`2161`	`2159`	`}`
	`2160`	`+ } else {`
	`2161`	`+ if (wasHidden) {`
	`2162`	`+ // TODO: Move re-appear call here for symmetry?`
	`2163`	`+ }`
`2162`	`2164`	`}`
`2163`		`- } else {`
`2164`		`- if (wasHidden) {`
`2165`		`- // TODO: Move re-appear call here for symmetry?`
`2166`		`- }`
	`2165`	`+ break;`
`2167`	`2166`	`}`
`2168`		`- break;`
`2169`	`2167`	`}`
`2170`	`2168`	`}`
`2171`	`2169`	`}`