Move Offscreen manual check to a function

Author: sammy-SC

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

@@ -22,11 +22,12 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {
+import {
   OffscreenState,
   OffscreenInstance,
   OffscreenQueue,
   OffscreenProps,
+  isOffscreenManual,
 } from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
@@ -2896,10 +2897,7 @@ function commitMutationEffectsOnFiber(
         }
 
         // Offscreen with manual mode manages visibility manually.
-        const shouldControlChildrenVisibility =
-          finishedWork.memoizedProps === null ||
-          finishedWork.memoizedProps.mode !== 'manual';
-        if (supportsMutation && shouldControlChildrenVisibility) {
+        if (supportsMutation && !isOffscreenManual(finishedWork)) {
           // TODO: This needs to run whenever there's an insertion or update
           // inside a hidden Offscreen tree.
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);

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

@@ -22,11 +22,12 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {
+import {
   OffscreenState,
   OffscreenInstance,
   OffscreenQueue,
   OffscreenProps,
+  isOffscreenManual,
 } from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
@@ -2896,10 +2897,7 @@ function commitMutationEffectsOnFiber(
         }
 
         // Offscreen with manual mode manages visibility manually.
-        const shouldControlChildrenVisibility =
-          finishedWork.memoizedProps === null ||
-          finishedWork.memoizedProps.mode !== 'manual';
-        if (supportsMutation && shouldControlChildrenVisibility) {
+        if (supportsMutation && !isOffscreenManual(finishedWork)) {
           // TODO: This needs to run whenever there's an insertion or update
           // inside a hidden Offscreen tree.
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);

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

@@ -27,7 +27,7 @@ import type {
   SuspenseState,
   SuspenseListRenderState,
 } from './ReactFiberSuspenseComponent.new';
-import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import {isOffscreenManual, OffscreenState} from './ReactFiberOffscreenComponent';
 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import {
@@ -429,8 +429,7 @@ if (supportsMutation) {
           child.return = node;
         }
         // If Offscreen is not in manual mode, detached tree is hidden from user space.
-        const _needsVisibilityToggle =
-          node.memoizedProps === null || node.memoizedProps.mode !== 'manual';
+        const _needsVisibilityToggle = !isOffscreenManual(node);
         appendAllChildrenToContainer(
           containerChildSet,
           node,

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

@@ -27,7 +27,7 @@ import type {
   SuspenseState,
   SuspenseListRenderState,
 } from './ReactFiberSuspenseComponent.old';
-import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import {isOffscreenManual, OffscreenState} from './ReactFiberOffscreenComponent';
 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import {
@@ -429,8 +429,7 @@ if (supportsMutation) {
           child.return = node;
         }
         // If Offscreen is not in manual mode, detached tree is hidden from user space.
-        const _needsVisibilityToggle =
-          node.memoizedProps === null || node.memoizedProps.mode !== 'manual';
+        const _needsVisibilityToggle = !isOffscreenManual(node);
         appendAllChildrenToContainer(
           containerChildSet,
           node,

packages/react-reconciler/src/ReactFiberOffscreenComponent.js

@@ -62,3 +62,9 @@ export type OffscreenInstance = {
 
   // TODO: attach
 };
+
+
+export function isOffscreenManual(offscreenFiber: Fiber): boolean {
+  return offscreenFiber.memoizedProps !== null &&
+    offscreenFiber.memoizedProps.mode === 'manual';
+}

scripts/error-codes/codes.json

@@ -441,5 +441,5 @@
   "453": "React expected a <head> element (document.head) to exist in the Document but one was not found. React never removes the head for any Document it renders into so the cause is likely in some other script running on this page.",
   "454": "React expected a <body> element (document.body) to exist in the Document but one was not found. React never removes the body for any Document it renders into so the cause is likely in some other script running on this page.",
   "455": "This CacheSignal was requested outside React which means that it is immediately aborted.",
-  "456": "Calling Offscreen.detach before instance handle has been set.",
+  "456": "Calling Offscreen.detach before instance handle has been set."
 }