Fix disableStrictPassiveEffect not working under Suspense (#26989)

In #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.
facebook · Jun 22, 2023 · 70e998a · 70e998a
1 parent c8deb5d
commit 70e998a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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');