Prevent infinite re-render in StrictMode + Offscreen

Author: sammy-SC

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -3184,7 +3185,10 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
-  if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
+  if (
+    fiber.flags & PlacementDEV ||
+    (fiber.tag === OffscreenComponent && fiber.flags & Visibility)
+  ) {
     setCurrentDebugFiberInDEV(fiber);
     if (isInStrictMode) {
       disappearLayoutEffects(fiber);

packages/react-reconciler/src/ReactFiberWorkLoop.old.js

@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -3184,7 +3185,10 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
-  if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
+  if (
+    fiber.flags & PlacementDEV ||
+    (fiber.tag === OffscreenComponent && fiber.flags & Visibility)
+  ) {
     setCurrentDebugFiberInDEV(fiber);
     if (isInStrictMode) {
       disappearLayoutEffects(fiber);

packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js

@@ -92,4 +92,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>,
+      );
+    });
+  });
 });