Prevent infinite re-render in StrictMode + Offscreen

facebook · Sep 8, 2022 · 3523be2 · 3523be2
1 parent a9dc73c
commit 3523be2
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -3184,9 +3185,12 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    if (isInStrictMode) {
+    const hasOffscreenVisibilityFlag =
+      fiber.tag !== OffscreenComponent || fiber.flags & Visibility;
+    if (isInStrictMode && hasOffscreenVisibilityFlag) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -3184,9 +3185,12 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    if (isInStrictMode) {
+    const hasOffscreenVisibilityFlag =
+      fiber.tag !== OffscreenComponent || fiber.flags & Visibility;
+    if (isInStrictMode && hasOffscreenVisibilityFlag) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);

diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
@@ -71,6 +71,21 @@ describe('ReactOffscreenStrictMode', () => {
 
     log = [];
 
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="hidden">
+            <Component label="A" />
+            <Component label="B" />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['A: render', 'A: render', 'B: render', 'B: render']);
+
+    log = [];
+
     act(() => {
       ReactNoop.render(
         <React.StrictMode>
@@ -92,4 +107,31 @@ describe('ReactOffscreenStrictMode', () => {
       'A: useEffect mount',
     ]);
   });
+
+  it('should not cause infinite render loop when StrictMode is used with Suspense and synchronous set states', () => {
+    // This is a regression test, see https://github.com/facebook/react/pull/25179 for more details.
+    function App() {
+      const [state, setState] = React.useState(false);
+
+      React.useLayoutEffect(() => {
+        setState(true);
+      }, []);
+
+      React.useEffect(() => {
+        // Empty useEffect with empty dependency array is needed to trigger infinite render loop.
+      }, []);
+
+      return state;
+    }
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <React.Suspense>
+            <App />
+          </React.Suspense>
+        </React.StrictMode>,
+      );
+    });
+  });
 });