From da1f09c68b4c1f2fbb7c41351ad708fe425e494f Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Thu, 22 Jun 2023 13:12:30 -0700
Subject: [PATCH] Fix disableStrictPassiveEffect not working under Suspense
 (#26989)

In https://github.com/facebook/react/pull/26914 I added an extra logic
to turn off double useEffect if there is an `Offscreen`
tag. But `Suspense` uses `Offscreen` tag internally and that turns off
`disableStrictPassiveEffect` for everything.
---
 packages/react-reconciler/src/ReactFiber.js   |  4 ----
 .../ReactOffscreenStrictMode-test.js          |  6 ++---
 .../ReactStrictMode-test.internal.js          | 24 +++++++++++++++++++
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index 15705b59787bf..1eb339328d940 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -760,10 +760,6 @@ export function createFiberFromOffscreen(
   lanes: Lanes,
   key: null | string,
 ): Fiber {
-  if (__DEV__) {
-    // StrictMode in Offscreen should always run double passive effects
-    mode &= ~NoStrictPassiveEffectsMode;
-  }
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
index f6ef02de522f9..a122626117612 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
@@ -55,8 +55,8 @@ describe('ReactOffscreenStrictMode', () => {
     ]);
   });
 
-  // @gate __DEV__ && enableOffscreen
-  it('should trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
+  // @gate __DEV__ && enableOffscreen && enableDO_NOT_USE_disableStrictPassiveEffect
+  it('does not trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
     await act(() => {
       ReactNoop.render(
         <React.StrictMode DO_NOT_USE_disableStrictPassiveEffect={true}>
@@ -73,9 +73,7 @@ describe('ReactOffscreenStrictMode', () => {
       'A: useLayoutEffect mount',
       'A: useEffect mount',
       'A: useLayoutEffect unmount',
-      'A: useEffect unmount',
       'A: useLayoutEffect mount',
-      'A: useEffect mount',
     ]);
   });
 
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 11ed37f599715..ed9ee70279648 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -126,6 +126,30 @@ describe('ReactStrictMode', () => {
         ]);
       });
 
+      // @gate enableDO_NOT_USE_disableStrictPassiveEffect
+      it('should include legacy + strict effects mode, but not strict passive effect with disableStrictPassiveEffect in Suspense', async () => {
+        await act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOMClient.createRoot(container);
+          root.render(
+            <React.StrictMode DO_NOT_USE_disableStrictPassiveEffect={true}>
+              <React.Suspense>
+                <Component label="A" />
+              </React.Suspense>
+            </React.StrictMode>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+          'A: useLayoutEffect unmount',
+          'A: useLayoutEffect mount',
+        ]);
+      });
+
       it('should allow level to be increased with nesting', async () => {
         await act(() => {
           const container = document.createElement('div');