diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 93a0598dfc40c..248698a9cd224 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -22,6 +22,7 @@ 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 {isOffscreenManual} from './ReactFiberOffscreenComponent'; import type { OffscreenState, OffscreenInstance, @@ -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); diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 305ee529fd3db..7156a4c143db9 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -22,6 +22,7 @@ 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 {isOffscreenManual} from './ReactFiberOffscreenComponent'; import type { OffscreenState, OffscreenInstance, @@ -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); diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js index 90f0d560ed868..e85cb8e7015ab 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js @@ -27,6 +27,7 @@ import type { SuspenseState, SuspenseListRenderState, } from './ReactFiberSuspenseComponent.new'; +import {isOffscreenManual} from './ReactFiberOffscreenComponent'; import type {OffscreenState} from './ReactFiberOffscreenComponent'; import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new'; import type {Cache} from './ReactFiberCacheComponent.new'; @@ -429,8 +430,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, diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js index 60613da786adb..d0bcc580df7f5 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js @@ -27,6 +27,7 @@ import type { SuspenseState, SuspenseListRenderState, } from './ReactFiberSuspenseComponent.old'; +import {isOffscreenManual} from './ReactFiberOffscreenComponent'; import type {OffscreenState} from './ReactFiberOffscreenComponent'; import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old'; import type {Cache} from './ReactFiberCacheComponent.old'; @@ -429,8 +430,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, diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js index 3ed1901795299..dbebee78c0461 100644 --- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js +++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js @@ -62,3 +62,10 @@ export type OffscreenInstance = { // TODO: attach }; + +export function isOffscreenManual(offscreenFiber: Fiber): boolean { + return ( + offscreenFiber.memoizedProps !== null && + offscreenFiber.memoizedProps.mode === 'manual' + ); +} diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index 60d02f0207c4c..86c99af5d2e8d 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -441,5 +441,5 @@ "453": "React expected a 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 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." }