Only fire effects for Offscreen when it is revealed

Author: sammy-SC

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

@@ -3188,9 +3188,12 @@ function doubleInvokeEffectsInDEV(
 
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    const hasOffscreenVisibilityFlag =
-      fiber.tag !== OffscreenComponent || fiber.flags & Visibility;
-    if (isInStrictMode && hasOffscreenVisibilityFlag) {
+    const isNotOffscreen = fiber.tag !== OffscreenComponent;
+    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
+    const hasOffscreenBecomeVisible =
+      isNotOffscreen ||
+      (fiber.flags & Visibility && fiber.memoizedState === null);
+    if (isInStrictMode && hasOffscreenBecomeVisible) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);

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

@@ -3188,9 +3188,12 @@ function doubleInvokeEffectsInDEV(
 
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    const hasOffscreenVisibilityFlag =
-      fiber.tag !== OffscreenComponent || fiber.flags & Visibility;
-    if (isInStrictMode && hasOffscreenVisibilityFlag) {
+    const isNotOffscreen = fiber.tag !== OffscreenComponent;
+    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
+    const hasOffscreenBecomeVisible =
+      isNotOffscreen ||
+      (fiber.flags & Visibility && fiber.memoizedState === null);
+    if (isInStrictMode && hasOffscreenBecomeVisible) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);

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

@@ -106,6 +106,25 @@ describe('ReactOffscreenStrictMode', () => {
       'A: useLayoutEffect mount',
       'A: useEffect mount',
     ]);
+
+    log = [];
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="hidden">
+            <Component label="A" />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual([
+      'A: useLayoutEffect unmount',
+      'A: useEffect unmount',
+      'A: render',
+      'A: render',
+    ]);
   });
 
   it('should not cause infinite render loop when StrictMode is used with Suspense and synchronous set states', () => {