{"parents":["3bb71dfd4bfc68920e758cd5fcf9fbfa44b99a21"],"commit":{"subject":"Add detach to Offscreen component (#25265)","authorName":"Samuel Susla","revision":"14072ce6489d8968d3687b4410da4c9f59f87cb5","shortRevision":"14072ce648","authorEmail":"samuel.susla@gmail.com","authoredAt":"2022-10-18T15:56:41+01:00"},"body":"","files":[{"path":"packages\/react-reconciler\/src\/ReactFiber.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiber.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js","status":"M"},{"path":"scripts\/error-codes\/codes.json","status":"M"}],"patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiber.new.js b\/packages\/react-reconciler\/src\/ReactFiber.new.js\nindex 57e10f9af2..971a88369c 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.new.js\n@@ -73,7 +73,6 @@ import {\n } from '.\/ReactWorkTags';\n import {OffscreenVisible} from '.\/ReactFiberOffscreenComponent';\n import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n-\n import {isDevToolsPresent} from '.\/ReactFiberDevToolsHook.new';\n import {\n resolveClassForHotReloading,\n@@ -109,6 +108,7 @@ import {\n REACT_TRACING_MARKER_TYPE,\n } from 'shared\/ReactSymbols';\n import {TransitionTracingMarker} from '.\/ReactFiberTracingMarkerComponent.new';\n+import {detachOffscreenInstance} from '.\/ReactFiberCommitWork.new';\n \n export type {Fiber};\n \n@@ -755,6 +755,8 @@ export function createFiberFromOffscreen(\n _pendingMarkers: null,\n _retryCache: null,\n _transitions: null,\n+ _current: null,\n+ detach: () => detachOffscreenInstance(primaryChildInstance),\n };\n fiber.stateNode = primaryChildInstance;\n return fiber;\n@@ -776,6 +778,8 @@ export function createFiberFromLegacyHidden(\n _pendingMarkers: null,\n _transitions: null,\n _retryCache: null,\n+ _current: null,\n+ detach: () => detachOffscreenInstance(instance),\n };\n fiber.stateNode = instance;\n return fiber;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.old.js b\/packages\/react-reconciler\/src\/ReactFiber.old.js\nindex dac93beeec..48c7db420c 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.old.js\n@@ -73,7 +73,6 @@ import {\n } from '.\/ReactWorkTags';\n import {OffscreenVisible} from '.\/ReactFiberOffscreenComponent';\n import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n-\n import {isDevToolsPresent} from '.\/ReactFiberDevToolsHook.old';\n import {\n resolveClassForHotReloading,\n@@ -109,6 +108,7 @@ import {\n REACT_TRACING_MARKER_TYPE,\n } from 'shared\/ReactSymbols';\n import {TransitionTracingMarker} from '.\/ReactFiberTracingMarkerComponent.old';\n+import {detachOffscreenInstance} from '.\/ReactFiberCommitWork.old';\n \n export type {Fiber};\n \n@@ -755,6 +755,8 @@ export function createFiberFromOffscreen(\n _pendingMarkers: null,\n _retryCache: null,\n _transitions: null,\n+ _current: null,\n+ detach: () => detachOffscreenInstance(primaryChildInstance),\n };\n fiber.stateNode = primaryChildInstance;\n return fiber;\n@@ -776,6 +778,8 @@ export function createFiberFromLegacyHidden(\n _pendingMarkers: null,\n _transitions: null,\n _retryCache: null,\n+ _current: null,\n+ detach: () => detachOffscreenInstance(instance),\n };\n fiber.stateNode = instance;\n return fiber;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex 4b75fd0f78..b94328007c 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -29,6 +29,7 @@ import type {\n OffscreenQueue,\n OffscreenInstance,\n } from '.\/ReactFiberOffscreenComponent';\n+import {OffscreenDetached} from '.\/ReactFiberOffscreenComponent';\n import type {\n Cache,\n CacheComponentState,\n@@ -37,7 +38,6 @@ import type {\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.new';\n import type {RootState} from '.\/ReactFiberRoot.new';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n-\n import checkPropTypes from 'shared\/checkPropTypes';\n import {\n markComponentRenderStarted,\n@@ -688,7 +688,10 @@ function updateOffscreenComponent(\n \n if (\n nextProps.mode === 'hidden' ||\n- (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')\n+ (enableLegacyHidden &&\n+ nextProps.mode === 'unstable-defer-without-hiding') ||\n+ \/\/ TODO: remove read from stateNode.\n+ workInProgress.stateNode._visibility & OffscreenDetached\n ) {\n \/\/ Rendering a hidden tree.\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex f44afa3b40..f9701df2fc 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -29,6 +29,7 @@ import type {\n OffscreenQueue,\n OffscreenInstance,\n } from '.\/ReactFiberOffscreenComponent';\n+import {OffscreenDetached} from '.\/ReactFiberOffscreenComponent';\n import type {\n Cache,\n CacheComponentState,\n@@ -37,7 +38,6 @@ import type {\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.old';\n import type {RootState} from '.\/ReactFiberRoot.old';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n-\n import checkPropTypes from 'shared\/checkPropTypes';\n import {\n markComponentRenderStarted,\n@@ -688,7 +688,10 @@ function updateOffscreenComponent(\n \n if (\n nextProps.mode === 'hidden' ||\n- (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')\n+ (enableLegacyHidden &&\n+ nextProps.mode === 'unstable-defer-without-hiding') ||\n+ \/\/ TODO: remove read from stateNode.\n+ workInProgress.stateNode._visibility & OffscreenDetached\n ) {\n \/\/ Rendering a hidden tree.\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex a879f457aa..1b4c338994 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -25,6 +25,7 @@ import type {SuspenseState} from '.\/ReactFiberSuspenseComponent.new';\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.new';\n import type {FunctionComponentUpdateQueue} from '.\/ReactFiberHooks.new';\n import type {Wakeable} from 'shared\/ReactTypes';\n+import {isOffscreenManual} from '.\/ReactFiberOffscreenComponent';\n import type {\n OffscreenState,\n OffscreenInstance,\n@@ -156,6 +157,7 @@ import {\n clearSingleton,\n acquireSingletonInstance,\n releaseSingletonInstance,\n+ scheduleMicrotask,\n } from '.\/ReactFiberHostConfig';\n import {\n captureCommitPhaseError,\n@@ -172,6 +174,7 @@ import {\n setIsRunningInsertionEffect,\n getExecutionContext,\n CommitContext,\n+ RenderContext,\n NoContext,\n } from '.\/ReactFiberWorkLoop.new';\n import {\n@@ -200,6 +203,7 @@ import {releaseCache, retainCache} from '.\/ReactFiberCacheComponent.new';\n import {clearTransitionsForLanes} from '.\/ReactFiberLane.new';\n import {\n OffscreenVisible,\n+ OffscreenDetached,\n OffscreenPassiveEffectsConnected,\n } from '.\/ReactFiberOffscreenComponent';\n import {\n@@ -2416,6 +2420,28 @@ function getRetryCache(finishedWork) {\n }\n }\n \n+export function detachOffscreenInstance(instance: OffscreenInstance): void {\n+ const currentOffscreenFiber = instance._current;\n+ if (currentOffscreenFiber === null) {\n+ throw new Error(\n+ 'Calling Offscreen.detach before instance handle has been set.',\n+ );\n+ }\n+\n+ const executionContext = getExecutionContext();\n+ if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {\n+ scheduleMicrotask(() => {\n+ instance._visibility |= OffscreenDetached;\n+ disappearLayoutEffects(currentOffscreenFiber);\n+ disconnectPassiveEffect(currentOffscreenFiber);\n+ });\n+ } else {\n+ instance._visibility |= OffscreenDetached;\n+ disappearLayoutEffects(currentOffscreenFiber);\n+ disconnectPassiveEffect(currentOffscreenFiber);\n+ }\n+}\n+\n function attachSuspenseRetryListeners(\n finishedWork: Fiber,\n wakeables: Set,\n@@ -2845,6 +2871,8 @@ function commitMutationEffectsOnFiber(\n }\n \n commitReconciliationEffects(finishedWork);\n+ \/\/ TODO: Add explicit effect flag to set _current.\n+ finishedWork.stateNode._current = finishedWork;\n \n if (flags & Visibility) {\n const offscreenInstance: OffscreenInstance = finishedWork.stateNode;\n@@ -2871,7 +2899,8 @@ function commitMutationEffectsOnFiber(\n }\n }\n \n- if (supportsMutation) {\n+ \/\/ Offscreen with manual mode manages visibility manually.\n+ if (supportsMutation && !isOffscreenManual(finishedWork)) {\n \/\/ TODO: This needs to run whenever there's an insertion or update\n \/\/ inside a hidden Offscreen tree.\n hideOrUnhideAllChildren(offscreenBoundary, isHidden);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex 0b772d6507..0217c00fd4 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -25,6 +25,7 @@ import type {SuspenseState} from '.\/ReactFiberSuspenseComponent.old';\n import type {UpdateQueue} from '.\/ReactFiberClassUpdateQueue.old';\n import type {FunctionComponentUpdateQueue} from '.\/ReactFiberHooks.old';\n import type {Wakeable} from 'shared\/ReactTypes';\n+import {isOffscreenManual} from '.\/ReactFiberOffscreenComponent';\n import type {\n OffscreenState,\n OffscreenInstance,\n@@ -156,6 +157,7 @@ import {\n clearSingleton,\n acquireSingletonInstance,\n releaseSingletonInstance,\n+ scheduleMicrotask,\n } from '.\/ReactFiberHostConfig';\n import {\n captureCommitPhaseError,\n@@ -172,6 +174,7 @@ import {\n setIsRunningInsertionEffect,\n getExecutionContext,\n CommitContext,\n+ RenderContext,\n NoContext,\n } from '.\/ReactFiberWorkLoop.old';\n import {\n@@ -200,6 +203,7 @@ import {releaseCache, retainCache} from '.\/ReactFiberCacheComponent.old';\n import {clearTransitionsForLanes} from '.\/ReactFiberLane.old';\n import {\n OffscreenVisible,\n+ OffscreenDetached,\n OffscreenPassiveEffectsConnected,\n } from '.\/ReactFiberOffscreenComponent';\n import {\n@@ -2416,6 +2420,28 @@ function getRetryCache(finishedWork) {\n }\n }\n \n+export function detachOffscreenInstance(instance: OffscreenInstance): void {\n+ const currentOffscreenFiber = instance._current;\n+ if (currentOffscreenFiber === null) {\n+ throw new Error(\n+ 'Calling Offscreen.detach before instance handle has been set.',\n+ );\n+ }\n+\n+ const executionContext = getExecutionContext();\n+ if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {\n+ scheduleMicrotask(() => {\n+ instance._visibility |= OffscreenDetached;\n+ disappearLayoutEffects(currentOffscreenFiber);\n+ disconnectPassiveEffect(currentOffscreenFiber);\n+ });\n+ } else {\n+ instance._visibility |= OffscreenDetached;\n+ disappearLayoutEffects(currentOffscreenFiber);\n+ disconnectPassiveEffect(currentOffscreenFiber);\n+ }\n+}\n+\n function attachSuspenseRetryListeners(\n finishedWork: Fiber,\n wakeables: Set,\n@@ -2845,6 +2871,8 @@ function commitMutationEffectsOnFiber(\n }\n \n commitReconciliationEffects(finishedWork);\n+ \/\/ TODO: Add explicit effect flag to set _current.\n+ finishedWork.stateNode._current = finishedWork;\n \n if (flags & Visibility) {\n const offscreenInstance: OffscreenInstance = finishedWork.stateNode;\n@@ -2871,7 +2899,8 @@ function commitMutationEffectsOnFiber(\n }\n }\n \n- if (supportsMutation) {\n+ \/\/ Offscreen with manual mode manages visibility manually.\n+ if (supportsMutation && !isOffscreenManual(finishedWork)) {\n \/\/ TODO: This needs to run whenever there's an insertion or update\n \/\/ inside a hidden Offscreen tree.\n hideOrUnhideAllChildren(offscreenBoundary, isHidden);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex 9031a733fc..5d3987698e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -26,6 +26,7 @@ import type {\n SuspenseState,\n SuspenseListRenderState,\n } from '.\/ReactFiberSuspenseComponent.new';\n+import {isOffscreenManual} from '.\/ReactFiberOffscreenComponent';\n import type {OffscreenState} from '.\/ReactFiberOffscreenComponent';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.new';\n import type {Cache} from '.\/ReactFiberCacheComponent.new';\n@@ -425,7 +426,14 @@ if (supportsMutation) {\n if (child !== null) {\n child.return = node;\n }\n- appendAllChildrenToContainer(containerChildSet, node, true, true);\n+ \/\/ If Offscreen is not in manual mode, detached tree is hidden from user space.\n+ const _needsVisibilityToggle = !isOffscreenManual(node);\n+ appendAllChildrenToContainer(\n+ containerChildSet,\n+ node,\n+ _needsVisibilityToggle,\n+ true,\n+ );\n } else if (node.child !== null) {\n node.child.return = node;\n node = node.child;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex ac35eeab58..6c92f523fb 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -26,6 +26,7 @@ import type {\n SuspenseState,\n SuspenseListRenderState,\n } from '.\/ReactFiberSuspenseComponent.old';\n+import {isOffscreenManual} from '.\/ReactFiberOffscreenComponent';\n import type {OffscreenState} from '.\/ReactFiberOffscreenComponent';\n import type {TracingMarkerInstance} from '.\/ReactFiberTracingMarkerComponent.old';\n import type {Cache} from '.\/ReactFiberCacheComponent.old';\n@@ -425,7 +426,14 @@ if (supportsMutation) {\n if (child !== null) {\n child.return = node;\n }\n- appendAllChildrenToContainer(containerChildSet, node, true, true);\n+ \/\/ If Offscreen is not in manual mode, detached tree is hidden from user space.\n+ const _needsVisibilityToggle = !isOffscreenManual(node);\n+ appendAllChildrenToContainer(\n+ containerChildSet,\n+ node,\n+ _needsVisibilityToggle,\n+ true,\n+ );\n } else if (node.child !== null) {\n node.child.return = node;\n node = node.child;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js b\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\nindex fe2817f0f4..dbebee78c0 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberOffscreenComponent.js\n@@ -10,6 +10,7 @@\n import type {ReactNodeList, OffscreenMode, Wakeable} from 'shared\/ReactTypes';\n import type {Lanes} from '.\/ReactFiberLane.old';\n import type {SpawnedCachePool} from '.\/ReactFiberCacheComponent.new';\n+import type {Fiber} from '.\/ReactInternalTypes';\n import type {\n Transition,\n TracingMarkerInstance,\n@@ -44,8 +45,9 @@ export type OffscreenQueue = {\n \n type OffscreenVisibility = number;\n \n-export const OffscreenVisible = \/* *\/ 0b01;\n-export const OffscreenPassiveEffectsConnected = \/* *\/ 0b10;\n+export const OffscreenVisible = \/* *\/ 0b001;\n+export const OffscreenDetached = \/* *\/ 0b010;\n+export const OffscreenPassiveEffectsConnected = \/* *\/ 0b100;\n \n export type OffscreenInstance = {\n _visibility: OffscreenVisibility,\n@@ -53,4 +55,17 @@ export type OffscreenInstance = {\n _transitions: Set | null,\n \/\/ $FlowFixMe[incompatible-type-arg] found when upgrading Flow\n _retryCache: WeakSet | Set | null,\n+\n+ \/\/ Represents the current Offscreen fiber\n+ _current: Fiber | null,\n+ detach: () => void,\n+\n+ \/\/ TODO: attach\n };\n+\n+export function isOffscreenManual(offscreenFiber: Fiber): boolean {\n+ return (\n+ offscreenFiber.memoizedProps !== null &&\n+ offscreenFiber.memoizedProps.mode === 'manual'\n+ );\n+}\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\nindex 172b956d8f..750ca10d36 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n@@ -290,7 +290,7 @@ type ExecutionContext = number;\n \n export const NoContext = \/* *\/ 0b000;\n const BatchedContext = \/* *\/ 0b001;\n-const RenderContext = \/* *\/ 0b010;\n+export const RenderContext = \/* *\/ 0b010;\n export const CommitContext = \/* *\/ 0b100;\n \n type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\nindex a439b90e40..e3470f18df 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n@@ -290,7 +290,7 @@ type ExecutionContext = number;\n \n export const NoContext = \/* *\/ 0b000;\n const BatchedContext = \/* *\/ 0b001;\n-const RenderContext = \/* *\/ 0b010;\n+export const RenderContext = \/* *\/ 0b010;\n export const CommitContext = \/* *\/ 0b100;\n \n type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js\nindex ca505c785f..66bd613763 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactOffscreen-test.js\n@@ -1362,6 +1362,200 @@ describe('ReactOffscreen', () => {\n \n expect(offscreenRef.current).not.toBeNull();\n });\n+\n+ \/\/ @gate enableOffscreen\n+ it('should lower update priority for detached Offscreen', async () => {\n+ let updateChildState;\n+ let updateHighPriorityComponentState;\n+ let offscreenRef;\n+\n+ function Child() {\n+ const [state, _stateUpdate] = useState(0);\n+ updateChildState = _stateUpdate;\n+ const text = 'Child ' + state;\n+ return ;\n+ }\n+\n+ function HighPriorityComponent(props) {\n+ const [state, _stateUpdate] = useState(0);\n+ updateHighPriorityComponentState = _stateUpdate;\n+ const text = 'HighPriorityComponent ' + state;\n+ return (\n+ <>\n+ \n+ {props.children}\n+ <\/>\n+ );\n+ }\n+\n+ function App() {\n+ offscreenRef = useRef(null);\n+ return (\n+ <>\n+ \n+ \n+ \n+ <\/Offscreen>\n+ <\/HighPriorityComponent>\n+ <\/>\n+ );\n+ }\n+\n+ const root = ReactNoop.createRoot();\n+\n+ await act(async () => {\n+ root.render();\n+ });\n+\n+ expect(Scheduler).toHaveYielded(['HighPriorityComponent 0', 'Child 0']);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+\n+ expect(offscreenRef.current).not.toBeNull();\n+ expect(offscreenRef.current.detach).not.toBeNull();\n+\n+ \/\/ Offscreen is attached by default. State updates from offscreen are **not defered**.\n+ await act(async () => {\n+ updateChildState(1);\n+ updateHighPriorityComponentState(1);\n+ expect(Scheduler).toFlushUntilNextPaint([\n+ 'HighPriorityComponent 1',\n+ 'Child 1',\n+ ]);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+ });\n+\n+ \/\/ detaching offscreen.\n+ offscreenRef.current.detach();\n+\n+ \/\/ Offscreen is detached. State updates from offscreen are **defered**.\n+ await act(async () => {\n+ updateChildState(2);\n+ updateHighPriorityComponentState(2);\n+ expect(Scheduler).toFlushUntilNextPaint(['HighPriorityComponent 2']);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+ });\n+\n+ expect(Scheduler).toHaveYielded(['Child 2']);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+ });\n+\n+ \/\/ @gate enableOffscreen\n+ it('defers detachment if called during commit', async () => {\n+ let updateChildState;\n+ let updateHighPriorityComponentState;\n+ let offscreenRef;\n+ let nextRenderTriggerDetach = false;\n+\n+ function Child() {\n+ const [state, _stateUpdate] = useState(0);\n+ updateChildState = _stateUpdate;\n+ const text = 'Child ' + state;\n+ return ;\n+ }\n+\n+ function HighPriorityComponent(props) {\n+ const [state, _stateUpdate] = useState(0);\n+ updateHighPriorityComponentState = _stateUpdate;\n+ const text = 'HighPriorityComponent ' + state;\n+ useLayoutEffect(() => {\n+ if (nextRenderTriggerDetach) {\n+ offscreenRef.current.detach();\n+ _stateUpdate(state + 1);\n+ updateChildState(state + 1);\n+ nextRenderTriggerDetach = false;\n+ }\n+ });\n+ return (\n+ <>\n+ \n+ {props.children}\n+ <\/>\n+ );\n+ }\n+\n+ function App() {\n+ offscreenRef = useRef(null);\n+ return (\n+ <>\n+ \n+ \n+ \n+ <\/Offscreen>\n+ <\/HighPriorityComponent>\n+ <\/>\n+ );\n+ }\n+\n+ const root = ReactNoop.createRoot();\n+\n+ await act(async () => {\n+ root.render();\n+ });\n+\n+ expect(Scheduler).toHaveYielded(['HighPriorityComponent 0', 'Child 0']);\n+\n+ nextRenderTriggerDetach = true;\n+\n+ \/\/ Offscreen is attached. State updates from offscreen are **not defered**.\n+ \/\/ Offscreen is detached inside useLayoutEffect;\n+ await act(async () => {\n+ updateChildState(1);\n+ updateHighPriorityComponentState(1);\n+ expect(Scheduler).toFlushUntilNextPaint([\n+ 'HighPriorityComponent 1',\n+ 'Child 1',\n+ 'HighPriorityComponent 2',\n+ 'Child 2',\n+ ]);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+ });\n+\n+ \/\/ Offscreen is detached. State updates from offscreen are **defered**.\n+ await act(async () => {\n+ updateChildState(3);\n+ updateHighPriorityComponentState(3);\n+ expect(Scheduler).toFlushUntilNextPaint(['HighPriorityComponent 3']);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+ });\n+\n+ expect(Scheduler).toHaveYielded(['Child 3']);\n+ expect(root).toMatchRenderedOutput(\n+ <>\n+ \n+ \n+ <\/>,\n+ );\n+ });\n });\n \n \/\/ @gate enableOffscreen\n@@ -1430,7 +1624,6 @@ describe('ReactOffscreen', () => {\n });\n \n expect(offscreenRef.current).not.toBeNull();\n-\n await act(async () => {\n root.render();\n });\n@@ -1438,5 +1631,41 @@ describe('ReactOffscreen', () => {\n expect(offscreenRef.current).toBeNull();\n });\n \n+ \/\/ @gate enableOffscreen\n+ it('should change _current', async () => {\n+ let offscreenRef;\n+ const root = ReactNoop.createRoot();\n+\n+ function App({children}) {\n+ offscreenRef = useRef(null);\n+ return (\n+ \n+ {children}\n+ <\/Offscreen>\n+ );\n+ }\n+\n+ await act(async () => {\n+ root.render(\n+ \n+

\n+ <\/App>,\n+ );\n+ });\n+\n+ expect(offscreenRef.current).not.toBeNull();\n+ const firstFiber = offscreenRef.current._current;\n+\n+ await act(async () => {\n+ root.render(\n+ \n+ \n+ <\/App>,\n+ );\n+ });\n+\n+ expect(offscreenRef.current._current === firstFiber).toBeFalsy();\n+ });\n+\n \/\/ TODO: When attach\/detach methods are implemented. Add tests for nested Offscreen case.\n });\ndiff --git a\/scripts\/error-codes\/codes.json b\/scripts\/error-codes\/codes.json\nindex 23afdb85c3..82c6194292 100644\n--- a\/scripts\/error-codes\/codes.json\n+++ b\/scripts\/error-codes\/codes.json\n@@ -440,5 +440,6 @@\n \"452\": \"React expected an element (document.documentElement) to exist in the Document but one was not found. React never removes the documentElement for any Document it renders into so the cause is likely in some other script running on this page.\",\n \"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.\",\n \"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.\",\n- \"455\": \"This CacheSignal was requested outside React which means that it is immediately aborted.\"\n-}\n\\ No newline at end of file\n+ \"455\": \"This CacheSignal was requested outside React which means that it is immediately aborted.\",\n+ \"456\": \"Calling Offscreen.detach before instance handle has been set.\"\n+}\n"}

dillon1000/react

Files changed