{"patch":"diff --git a\/packages\/react-art\/src\/ReactART.js b\/packages\/react-art\/src\/ReactART.js\nindex 44cdf4f240..9d1b6a16c2 100644\n--- a\/packages\/react-art\/src\/ReactART.js\n+++ b\/packages\/react-art\/src\/ReactART.js\n@@ -69,6 +69,7 @@ class Surface extends React.Component {\n this._mountNode = createContainer(\n this._surface,\n LegacyRoot,\n+ false,\n null,\n false,\n false,\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzShellHydration-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzShellHydration-test.js\nindex 3584715f91..f3ff64daee 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzShellHydration-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFizzShellHydration-test.js\n@@ -9,7 +9,6 @@\n \n let JSDOM;\n let React;\n-let startTransition;\n let ReactDOMClient;\n let Scheduler;\n let clientAct;\n@@ -34,8 +33,6 @@ describe('ReactDOMFizzShellHydration', () => {\n ReactDOMFizzServer = require('react-dom\/server');\n Stream = require('stream');\n \n- startTransition = React.startTransition;\n-\n textCache = new Map();\n \n \/\/ Test Environment\n@@ -217,36 +214,7 @@ describe('ReactDOMFizzShellHydration', () => {\n expect(container.textContent).toBe('Shell');\n });\n \n- test(\n- 'updating the root at lower priority than initial hydration does not ' +\n- 'force a client render',\n- async () => {\n- function App() {\n- return ;\n- }\n-\n- \/\/ Server render\n- await resolveText('Initial');\n- await serverAct(async () => {\n- const {pipe} = ReactDOMFizzServer.renderToPipeableStream();\n- pipe(writable);\n- });\n- expect(Scheduler).toHaveYielded(['Initial']);\n-\n- await clientAct(async () => {\n- const root = ReactDOMClient.hydrateRoot(container, );\n- \/\/ This has lower priority than the initial hydration, so the update\n- \/\/ won't be processed until after hydration finishes.\n- startTransition(() => {\n- root.render();\n- });\n- });\n- expect(Scheduler).toHaveYielded(['Initial', 'Updated']);\n- expect(container.textContent).toBe('Updated');\n- },\n- );\n-\n- test('updating the root while the shell is suspended forces a client render', async () => {\n+ test('updating the root before the shell hydrates forces a client render', async () => {\n function App() {\n return ;\n }\n@@ -277,9 +245,9 @@ describe('ReactDOMFizzShellHydration', () => {\n root.render();\n });\n expect(Scheduler).toHaveYielded([\n- 'New screen',\n 'This root received an early update, before anything was able ' +\n 'hydrate. Switched the entire root to client rendering.',\n+ 'New screen',\n ]);\n expect(container.textContent).toBe('New screen');\n });\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\nindex 9d6a381883..df693b8784 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js\n@@ -253,15 +253,6 @@ describe('ReactDOMRoot', () => {\n );\n });\n \n- it('callback passed to legacy hydrate() API', () => {\n- container.innerHTML = '

Hi<\/div>';\n- ReactDOM.hydrate(

Hi<\/div>, container, () => {\n- Scheduler.unstable_yieldValue('callback');\n- });\n- expect(container.textContent).toEqual('Hi');\n- expect(Scheduler).toHaveYielded(['callback']);\n- });\n-\n it('warns when unmounting with legacy API (no previous content)', () => {\n const root = ReactDOMClient.createRoot(container);\n root.render(

Hi<\/div>);\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js b\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\nindex af0e35e128..3b751405a3 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\n@@ -27,7 +27,6 @@ import {\n \n import {\n createContainer,\n- createHydrationContainer,\n findHostInstanceWithNoPortals,\n updateContainer,\n flushSync,\n@@ -110,81 +109,34 @@ function noopOnRecoverableError() {\n \n function legacyCreateRootFromDOMContainer(\n container: Container,\n- initialChildren: ReactNodeList,\n- parentComponent: ?React$Component,\n- callback: ?Function,\n- isHydrationContainer: boolean,\n+ forceHydrate: boolean,\n ): FiberRoot {\n- if (isHydrationContainer) {\n- if (typeof callback === 'function') {\n- const originalCallback = callback;\n- callback = function() {\n- const instance = getPublicRootInstance(root);\n- originalCallback.call(instance);\n- };\n- }\n-\n- const root = createHydrationContainer(\n- initialChildren,\n- callback,\n- container,\n- LegacyRoot,\n- null, \/\/ hydrationCallbacks\n- false, \/\/ isStrictMode\n- false, \/\/ concurrentUpdatesByDefaultOverride,\n- '', \/\/ identifierPrefix\n- noopOnRecoverableError,\n- \/\/ TODO(luna) Support hydration later\n- null,\n- );\n- container._reactRootContainer = root;\n- markContainerAsRoot(root.current, container);\n-\n- const rootContainerElement =\n- container.nodeType === COMMENT_NODE ? container.parentNode : container;\n- listenToAllSupportedEvents(rootContainerElement);\n-\n- flushSync();\n- return root;\n- } else {\n- \/\/ First clear any existing content.\n+ \/\/ First clear any existing content.\n+ if (!forceHydrate) {\n let rootSibling;\n while ((rootSibling = container.lastChild)) {\n container.removeChild(rootSibling);\n }\n+ }\n \n- if (typeof callback === 'function') {\n- const originalCallback = callback;\n- callback = function() {\n- const instance = getPublicRootInstance(root);\n- originalCallback.call(instance);\n- };\n- }\n-\n- const root = createContainer(\n- container,\n- LegacyRoot,\n- null, \/\/ hydrationCallbacks\n- false, \/\/ isStrictMode\n- false, \/\/ concurrentUpdatesByDefaultOverride,\n- '', \/\/ identifierPrefix\n- noopOnRecoverableError, \/\/ onRecoverableError\n- null, \/\/ transitionCallbacks\n- );\n- container._reactRootContainer = root;\n- markContainerAsRoot(root.current, container);\n-\n- const rootContainerElement =\n- container.nodeType === COMMENT_NODE ? container.parentNode : container;\n- listenToAllSupportedEvents(rootContainerElement);\n+ const root = createContainer(\n+ container,\n+ LegacyRoot,\n+ forceHydrate,\n+ null, \/\/ hydrationCallbacks\n+ false, \/\/ isStrictMode\n+ false, \/\/ concurrentUpdatesByDefaultOverride,\n+ '', \/\/ identifierPrefix\n+ noopOnRecoverableError, \/\/ onRecoverableError\n+ null, \/\/ transitionCallbacks\n+ );\n+ markContainerAsRoot(root.current, container);\n \n- \/\/ Initial mount should not be batched.\n- flushSync(() => {\n- updateContainer(initialChildren, root, parentComponent, callback);\n- });\n+ const rootContainerElement =\n+ container.nodeType === COMMENT_NODE ? container.parentNode : container;\n+ listenToAllSupportedEvents(rootContainerElement);\n \n- return root;\n- }\n+ return root;\n }\n \n function warnOnInvalidCallback(callback: mixed, callerName: string): void {\n@@ -212,30 +164,39 @@ function legacyRenderSubtreeIntoContainer(\n warnOnInvalidCallback(callback === undefined ? null : callback, 'render');\n }\n \n- const maybeRoot = container._reactRootContainer;\n- let root: FiberRoot;\n- if (!maybeRoot) {\n+ let root = container._reactRootContainer;\n+ let fiberRoot: FiberRoot;\n+ if (!root) {\n \/\/ Initial mount\n- root = legacyCreateRootFromDOMContainer(\n+ root = container._reactRootContainer = legacyCreateRootFromDOMContainer(\n container,\n- children,\n- parentComponent,\n- callback,\n forceHydrate,\n );\n+ fiberRoot = root;\n+ if (typeof callback === 'function') {\n+ const originalCallback = callback;\n+ callback = function() {\n+ const instance = getPublicRootInstance(fiberRoot);\n+ originalCallback.call(instance);\n+ };\n+ }\n+ \/\/ Initial mount should not be batched.\n+ flushSync(() => {\n+ updateContainer(children, fiberRoot, parentComponent, callback);\n+ });\n } else {\n- root = maybeRoot;\n+ fiberRoot = root;\n if (typeof callback === 'function') {\n const originalCallback = callback;\n callback = function() {\n- const instance = getPublicRootInstance(root);\n+ const instance = getPublicRootInstance(fiberRoot);\n originalCallback.call(instance);\n };\n }\n \/\/ Update\n- updateContainer(children, root, parentComponent, callback);\n+ updateContainer(children, fiberRoot, parentComponent, callback);\n }\n- return getPublicRootInstance(root);\n+ return getPublicRootInstance(fiberRoot);\n }\n \n export function findDOMNode(\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\nindex 6e7192ae10..d71de3bb0c 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMRoot.js\n@@ -225,6 +225,7 @@ export function createRoot(\n const root = createContainer(\n container,\n ConcurrentRoot,\n+ false,\n null,\n isStrictMode,\n concurrentUpdatesByDefaultOverride,\n@@ -301,7 +302,6 @@ export function hydrateRoot(\n \n const root = createHydrationContainer(\n initialChildren,\n- null,\n container,\n ConcurrentRoot,\n hydrationCallbacks,\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex e2974586ec..f8b8231f8f 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -53,7 +53,6 @@ import {\n setCurrentUpdatePriority,\n } from 'react-reconciler\/src\/ReactEventPriorities';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n-import {isRootDehydrated} from 'react-reconciler\/src\/ReactFiberShellHydration';\n \n const {ReactCurrentBatchConfig} = ReactSharedInternals;\n \n@@ -387,7 +386,7 @@ export function findInstanceBlockingEvent(\n targetInst = null;\n } else if (tag === HostRoot) {\n const root: FiberRoot = nearestMounted.stateNode;\n- if (isRootDehydrated(root)) {\n+ if (root.isDehydrated) {\n \/\/ If this happens during a replay something went wrong and it might block\n \/\/ the whole system.\n return getContainerFromFiber(nearestMounted);\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\nindex 9de82a99a7..744f5dfda9 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n@@ -39,7 +39,6 @@ import {\n } from '..\/client\/ReactDOMComponentTree';\n import {HostRoot, SuspenseComponent} from 'react-reconciler\/src\/ReactWorkTags';\n import {isHigherEventPriority} from 'react-reconciler\/src\/ReactEventPriorities';\n-import {isRootDehydrated} from 'react-reconciler\/src\/ReactFiberShellHydration';\n \n let _attemptSynchronousHydration: (fiber: Object) => void;\n \n@@ -415,7 +414,7 @@ function attemptExplicitHydrationTarget(\n }\n } else if (tag === HostRoot) {\n const root: FiberRoot = nearestMounted.stateNode;\n- if (isRootDehydrated(root)) {\n+ if (root.isDehydrated) {\n queuedTarget.blockedOn = getContainerFromFiber(nearestMounted);\n \/\/ We don't currently have a way to increase the priority of\n \/\/ a root other than sync.\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabric.js b\/packages\/react-native-renderer\/src\/ReactFabric.js\nindex e08a98653f..127b20fd5d 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabric.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabric.js\n@@ -215,6 +215,7 @@ function render(\n root = createContainer(\n containerTag,\n concurrentRoot ? ConcurrentRoot : LegacyRoot,\n+ false,\n null,\n false,\n null,\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\nindex e751195dda..1dca2cd7a1 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n@@ -211,6 +211,7 @@ function render(\n root = createContainer(\n containerTag,\n LegacyRoot,\n+ false,\n null,\n false,\n null,\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 8e4050dcfa..e0ba72076a 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -974,6 +974,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n root = NoopRenderer.createContainer(\n container,\n tag,\n+ false,\n null,\n null,\n false,\n@@ -995,6 +996,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n const fiberRoot = NoopRenderer.createContainer(\n container,\n ConcurrentRoot,\n+ false,\n null,\n null,\n false,\n@@ -1027,6 +1029,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n const fiberRoot = NoopRenderer.createContainer(\n container,\n LegacyRoot,\n+ false,\n null,\n null,\n false,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex 7dc29bd2b0..4bae5d0b7b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -7,11 +7,7 @@\n * @flow\n *\/\n \n-import type {\n- ReactProviderType,\n- ReactContext,\n- ReactNodeList,\n-} from 'shared\/ReactTypes';\n+import type {ReactProviderType, ReactContext} from 'shared\/ReactTypes';\n import type {LazyComponent as LazyComponentType} from 'react\/src\/ReactLazy';\n import type {Fiber, FiberRoot} from '.\/ReactInternalTypes';\n import type {TypeOfMode} from '.\/ReactTypeOfMode';\n@@ -33,7 +29,6 @@ import type {\n SpawnedCachePool,\n } from '.\/ReactFiberCacheComponent.new';\n import type {UpdateQueue} from '.\/ReactUpdateQueue.new';\n-import type {RootState} from '.\/ReactFiberRoot.new';\n import {\n enableSuspenseAvoidThisFallback,\n enableCPUSuspense,\n@@ -1316,7 +1311,7 @@ function pushHostRootContext(workInProgress) {\n \n function updateHostRoot(current, workInProgress, renderLanes) {\n pushHostRootContext(workInProgress);\n- const updateQueue: UpdateQueue = (workInProgress.updateQueue: any);\n+ const updateQueue = workInProgress.updateQueue;\n \n if (current === null || updateQueue === null) {\n throw new Error(\n@@ -1331,7 +1326,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {\n const prevChildren = prevState.element;\n cloneUpdateQueue(current, workInProgress);\n processUpdateQueue(workInProgress, nextProps, null, renderLanes);\n- const nextState: RootState = workInProgress.memoizedState;\n+ const nextState = workInProgress.memoizedState;\n \n const root: FiberRoot = workInProgress.stateNode;\n \n@@ -1346,130 +1341,64 @@ function updateHostRoot(current, workInProgress, renderLanes) {\n }\n \n if (enableTransitionTracing) {\n- \/\/ FIXME: Slipped past code review. This is not a safe mutation:\n- \/\/ workInProgress.memoizedState is a shared object. Need to fix before\n- \/\/ rolling out the Transition Tracing experiment.\n workInProgress.memoizedState.transitions = getWorkInProgressTransitions();\n }\n \n \/\/ Caution: React DevTools currently depends on this property\n \/\/ being called \"element\".\n const nextChildren = nextState.element;\n- if (supportsHydration && prevState.isDehydrated) {\n- \/\/ This is a hydration root whose shell has not yet hydrated. We should\n- \/\/ attempt to hydrate.\n- if (workInProgress.flags & ForceClientRender) {\n- \/\/ Something errored during a previous attempt to hydrate the shell, so we\n- \/\/ forced a client render.\n- const recoverableError = new Error(\n- 'There was an error while hydrating. Because the error happened outside ' +\n- 'of a Suspense boundary, the entire root will switch to ' +\n- 'client rendering.',\n- );\n- return mountHostRootWithoutHydrating(\n- current,\n- workInProgress,\n- updateQueue,\n- nextState,\n- nextChildren,\n- renderLanes,\n- recoverableError,\n- );\n- } else if (nextChildren !== prevChildren) {\n- const recoverableError = new Error(\n- 'This root received an early update, before anything was able ' +\n- 'hydrate. Switched the entire root to client rendering.',\n- );\n- return mountHostRootWithoutHydrating(\n- current,\n- workInProgress,\n- updateQueue,\n- nextState,\n- nextChildren,\n- renderLanes,\n- recoverableError,\n- );\n- } else {\n- \/\/ The outermost shell has not hydrated yet. Start hydrating.\n- enterHydrationState(workInProgress);\n- if (supportsHydration) {\n- const mutableSourceEagerHydrationData =\n- root.mutableSourceEagerHydrationData;\n- if (mutableSourceEagerHydrationData != null) {\n- for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {\n- const mutableSource = ((mutableSourceEagerHydrationData[\n- i\n- ]: any): MutableSource);\n- const version = mutableSourceEagerHydrationData[i + 1];\n- setWorkInProgressVersion(mutableSource, version);\n- }\n+ if (nextChildren === prevChildren) {\n+ resetHydrationState();\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);\n+ }\n+ if (root.isDehydrated && enterHydrationState(workInProgress)) {\n+ \/\/ If we don't have any current children this might be the first pass.\n+ \/\/ We always try to hydrate. If this isn't a hydration pass there won't\n+ \/\/ be any children to hydrate which is effectively the same thing as\n+ \/\/ not hydrating.\n+\n+ if (supportsHydration) {\n+ const mutableSourceEagerHydrationData =\n+ root.mutableSourceEagerHydrationData;\n+ if (mutableSourceEagerHydrationData != null) {\n+ for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {\n+ const mutableSource = ((mutableSourceEagerHydrationData[\n+ i\n+ ]: any): MutableSource);\n+ const version = mutableSourceEagerHydrationData[i + 1];\n+ setWorkInProgressVersion(mutableSource, version);\n }\n }\n+ }\n \n- const child = mountChildFibers(\n- workInProgress,\n- null,\n- nextChildren,\n- renderLanes,\n- );\n- workInProgress.child = child;\n+ const child = mountChildFibers(\n+ workInProgress,\n+ null,\n+ nextChildren,\n+ renderLanes,\n+ );\n+ workInProgress.child = child;\n \n- let node = child;\n- while (node) {\n- \/\/ Mark each child as hydrating. This is a fast path to know whether this\n- \/\/ tree is part of a hydrating tree. This is used to determine if a child\n- \/\/ node has fully mounted yet, and for scheduling event replaying.\n- \/\/ Conceptually this is similar to Placement in that a new subtree is\n- \/\/ inserted into the React tree here. It just happens to not need DOM\n- \/\/ mutations because it already exists.\n- node.flags = (node.flags & ~Placement) | Hydrating;\n- node = node.sibling;\n- }\n+ let node = child;\n+ while (node) {\n+ \/\/ Mark each child as hydrating. This is a fast path to know whether this\n+ \/\/ tree is part of a hydrating tree. This is used to determine if a child\n+ \/\/ node has fully mounted yet, and for scheduling event replaying.\n+ \/\/ Conceptually this is similar to Placement in that a new subtree is\n+ \/\/ inserted into the React tree here. It just happens to not need DOM\n+ \/\/ mutations because it already exists.\n+ node.flags = (node.flags & ~Placement) | Hydrating;\n+ node = node.sibling;\n }\n } else {\n- \/\/ Root is not dehydrated. Either this is a client-only root, or it\n- \/\/ already hydrated.\n- resetHydrationState();\n- if (nextChildren === prevChildren) {\n- return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);\n- }\n+ \/\/ Otherwise reset hydration state in case we aborted and resumed another\n+ \/\/ root.\n reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n+ resetHydrationState();\n }\n return workInProgress.child;\n }\n \n-function mountHostRootWithoutHydrating(\n- current: Fiber,\n- workInProgress: Fiber,\n- updateQueue: UpdateQueue,\n- nextState: RootState,\n- nextChildren: ReactNodeList,\n- renderLanes: Lanes,\n- recoverableError: Error,\n-) {\n- \/\/ Revert to client rendering.\n- resetHydrationState();\n-\n- queueHydrationError(recoverableError);\n-\n- workInProgress.flags |= ForceClientRender;\n-\n- \/\/ Flip isDehydrated to false to indicate that when this render\n- \/\/ finishes, the root will no longer be dehydrated.\n- const overrideState: RootState = {\n- element: nextChildren,\n- isDehydrated: false,\n- cache: nextState.cache,\n- transitions: nextState.transitions,\n- };\n- \/\/ `baseState` can always be the last state because the root doesn't\n- \/\/ have reducer functions so it doesn't need rebasing.\n- updateQueue.baseState = overrideState;\n- workInProgress.memoizedState = overrideState;\n- reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n- return workInProgress.child;\n-}\n-\n function updateHostComponent(\n current: Fiber | null,\n workInProgress: Fiber,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex 206773b03b..583539dd08 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -7,11 +7,7 @@\n * @flow\n *\/\n \n-import type {\n- ReactProviderType,\n- ReactContext,\n- ReactNodeList,\n-} from 'shared\/ReactTypes';\n+import type {ReactProviderType, ReactContext} from 'shared\/ReactTypes';\n import type {LazyComponent as LazyComponentType} from 'react\/src\/ReactLazy';\n import type {Fiber, FiberRoot} from '.\/ReactInternalTypes';\n import type {TypeOfMode} from '.\/ReactTypeOfMode';\n@@ -33,7 +29,6 @@ import type {\n SpawnedCachePool,\n } from '.\/ReactFiberCacheComponent.old';\n import type {UpdateQueue} from '.\/ReactUpdateQueue.old';\n-import type {RootState} from '.\/ReactFiberRoot.old';\n import {\n enableSuspenseAvoidThisFallback,\n enableCPUSuspense,\n@@ -1316,7 +1311,7 @@ function pushHostRootContext(workInProgress) {\n \n function updateHostRoot(current, workInProgress, renderLanes) {\n pushHostRootContext(workInProgress);\n- const updateQueue: UpdateQueue = (workInProgress.updateQueue: any);\n+ const updateQueue = workInProgress.updateQueue;\n \n if (current === null || updateQueue === null) {\n throw new Error(\n@@ -1331,7 +1326,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {\n const prevChildren = prevState.element;\n cloneUpdateQueue(current, workInProgress);\n processUpdateQueue(workInProgress, nextProps, null, renderLanes);\n- const nextState: RootState = workInProgress.memoizedState;\n+ const nextState = workInProgress.memoizedState;\n \n const root: FiberRoot = workInProgress.stateNode;\n \n@@ -1346,130 +1341,64 @@ function updateHostRoot(current, workInProgress, renderLanes) {\n }\n \n if (enableTransitionTracing) {\n- \/\/ FIXME: Slipped past code review. This is not a safe mutation:\n- \/\/ workInProgress.memoizedState is a shared object. Need to fix before\n- \/\/ rolling out the Transition Tracing experiment.\n workInProgress.memoizedState.transitions = getWorkInProgressTransitions();\n }\n \n \/\/ Caution: React DevTools currently depends on this property\n \/\/ being called \"element\".\n const nextChildren = nextState.element;\n- if (supportsHydration && prevState.isDehydrated) {\n- \/\/ This is a hydration root whose shell has not yet hydrated. We should\n- \/\/ attempt to hydrate.\n- if (workInProgress.flags & ForceClientRender) {\n- \/\/ Something errored during a previous attempt to hydrate the shell, so we\n- \/\/ forced a client render.\n- const recoverableError = new Error(\n- 'There was an error while hydrating. Because the error happened outside ' +\n- 'of a Suspense boundary, the entire root will switch to ' +\n- 'client rendering.',\n- );\n- return mountHostRootWithoutHydrating(\n- current,\n- workInProgress,\n- updateQueue,\n- nextState,\n- nextChildren,\n- renderLanes,\n- recoverableError,\n- );\n- } else if (nextChildren !== prevChildren) {\n- const recoverableError = new Error(\n- 'This root received an early update, before anything was able ' +\n- 'hydrate. Switched the entire root to client rendering.',\n- );\n- return mountHostRootWithoutHydrating(\n- current,\n- workInProgress,\n- updateQueue,\n- nextState,\n- nextChildren,\n- renderLanes,\n- recoverableError,\n- );\n- } else {\n- \/\/ The outermost shell has not hydrated yet. Start hydrating.\n- enterHydrationState(workInProgress);\n- if (supportsHydration) {\n- const mutableSourceEagerHydrationData =\n- root.mutableSourceEagerHydrationData;\n- if (mutableSourceEagerHydrationData != null) {\n- for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {\n- const mutableSource = ((mutableSourceEagerHydrationData[\n- i\n- ]: any): MutableSource);\n- const version = mutableSourceEagerHydrationData[i + 1];\n- setWorkInProgressVersion(mutableSource, version);\n- }\n+ if (nextChildren === prevChildren) {\n+ resetHydrationState();\n+ return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);\n+ }\n+ if (root.isDehydrated && enterHydrationState(workInProgress)) {\n+ \/\/ If we don't have any current children this might be the first pass.\n+ \/\/ We always try to hydrate. If this isn't a hydration pass there won't\n+ \/\/ be any children to hydrate which is effectively the same thing as\n+ \/\/ not hydrating.\n+\n+ if (supportsHydration) {\n+ const mutableSourceEagerHydrationData =\n+ root.mutableSourceEagerHydrationData;\n+ if (mutableSourceEagerHydrationData != null) {\n+ for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {\n+ const mutableSource = ((mutableSourceEagerHydrationData[\n+ i\n+ ]: any): MutableSource);\n+ const version = mutableSourceEagerHydrationData[i + 1];\n+ setWorkInProgressVersion(mutableSource, version);\n }\n }\n+ }\n \n- const child = mountChildFibers(\n- workInProgress,\n- null,\n- nextChildren,\n- renderLanes,\n- );\n- workInProgress.child = child;\n+ const child = mountChildFibers(\n+ workInProgress,\n+ null,\n+ nextChildren,\n+ renderLanes,\n+ );\n+ workInProgress.child = child;\n \n- let node = child;\n- while (node) {\n- \/\/ Mark each child as hydrating. This is a fast path to know whether this\n- \/\/ tree is part of a hydrating tree. This is used to determine if a child\n- \/\/ node has fully mounted yet, and for scheduling event replaying.\n- \/\/ Conceptually this is similar to Placement in that a new subtree is\n- \/\/ inserted into the React tree here. It just happens to not need DOM\n- \/\/ mutations because it already exists.\n- node.flags = (node.flags & ~Placement) | Hydrating;\n- node = node.sibling;\n- }\n+ let node = child;\n+ while (node) {\n+ \/\/ Mark each child as hydrating. This is a fast path to know whether this\n+ \/\/ tree is part of a hydrating tree. This is used to determine if a child\n+ \/\/ node has fully mounted yet, and for scheduling event replaying.\n+ \/\/ Conceptually this is similar to Placement in that a new subtree is\n+ \/\/ inserted into the React tree here. It just happens to not need DOM\n+ \/\/ mutations because it already exists.\n+ node.flags = (node.flags & ~Placement) | Hydrating;\n+ node = node.sibling;\n }\n } else {\n- \/\/ Root is not dehydrated. Either this is a client-only root, or it\n- \/\/ already hydrated.\n- resetHydrationState();\n- if (nextChildren === prevChildren) {\n- return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);\n- }\n+ \/\/ Otherwise reset hydration state in case we aborted and resumed another\n+ \/\/ root.\n reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n+ resetHydrationState();\n }\n return workInProgress.child;\n }\n \n-function mountHostRootWithoutHydrating(\n- current: Fiber,\n- workInProgress: Fiber,\n- updateQueue: UpdateQueue,\n- nextState: RootState,\n- nextChildren: ReactNodeList,\n- renderLanes: Lanes,\n- recoverableError: Error,\n-) {\n- \/\/ Revert to client rendering.\n- resetHydrationState();\n-\n- queueHydrationError(recoverableError);\n-\n- workInProgress.flags |= ForceClientRender;\n-\n- \/\/ Flip isDehydrated to false to indicate that when this render\n- \/\/ finishes, the root will no longer be dehydrated.\n- const overrideState: RootState = {\n- element: nextChildren,\n- isDehydrated: false,\n- cache: nextState.cache,\n- transitions: nextState.transitions,\n- };\n- \/\/ `baseState` can always be the last state because the root doesn't\n- \/\/ have reducer functions so it doesn't need rebasing.\n- updateQueue.baseState = overrideState;\n- workInProgress.memoizedState = overrideState;\n- reconcileChildren(current, workInProgress, nextChildren, renderLanes);\n- return workInProgress.child;\n-}\n-\n function updateHostComponent(\n current: Fiber | null,\n workInProgress: Fiber,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex 776c402a00..75553555b9 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -25,7 +25,6 @@ import type {Wakeable} from 'shared\/ReactTypes';\n import type {OffscreenState} from '.\/ReactFiberOffscreenComponent';\n import type {HookFlags} from '.\/ReactHookEffectTags';\n import type {Cache} from '.\/ReactFiberCacheComponent.new';\n-import type {RootState} from '.\/ReactFiberRoot.new';\n \n import {\n enableCreateEventHandleAPI,\n@@ -1878,12 +1877,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n }\n case HostRoot: {\n if (supportsHydration) {\n- if (current !== null) {\n- const prevRootState: RootState = current.memoizedState;\n- if (prevRootState.isDehydrated) {\n- const root: FiberRoot = finishedWork.stateNode;\n- commitHydratedContainer(root.containerInfo);\n- }\n+ const root: FiberRoot = finishedWork.stateNode;\n+ if (root.isDehydrated) {\n+ \/\/ We've just hydrated. No need to hydrate again.\n+ root.isDehydrated = false;\n+ commitHydratedContainer(root.containerInfo);\n }\n }\n break;\n@@ -1987,12 +1985,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n }\n case HostRoot: {\n if (supportsHydration) {\n- if (current !== null) {\n- const prevRootState: RootState = current.memoizedState;\n- if (prevRootState.isDehydrated) {\n- const root: FiberRoot = finishedWork.stateNode;\n- commitHydratedContainer(root.containerInfo);\n- }\n+ const root: FiberRoot = finishedWork.stateNode;\n+ if (root.isDehydrated) {\n+ \/\/ We've just hydrated. No need to hydrate again.\n+ root.isDehydrated = false;\n+ commitHydratedContainer(root.containerInfo);\n }\n }\n return;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex a53d4a2a87..23e9d6070c 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -25,7 +25,6 @@ import type {Wakeable} from 'shared\/ReactTypes';\n import type {OffscreenState} from '.\/ReactFiberOffscreenComponent';\n import type {HookFlags} from '.\/ReactHookEffectTags';\n import type {Cache} from '.\/ReactFiberCacheComponent.old';\n-import type {RootState} from '.\/ReactFiberRoot.old';\n \n import {\n enableCreateEventHandleAPI,\n@@ -1878,12 +1877,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n }\n case HostRoot: {\n if (supportsHydration) {\n- if (current !== null) {\n- const prevRootState: RootState = current.memoizedState;\n- if (prevRootState.isDehydrated) {\n- const root: FiberRoot = finishedWork.stateNode;\n- commitHydratedContainer(root.containerInfo);\n- }\n+ const root: FiberRoot = finishedWork.stateNode;\n+ if (root.isDehydrated) {\n+ \/\/ We've just hydrated. No need to hydrate again.\n+ root.isDehydrated = false;\n+ commitHydratedContainer(root.containerInfo);\n }\n }\n break;\n@@ -1987,12 +1985,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {\n }\n case HostRoot: {\n if (supportsHydration) {\n- if (current !== null) {\n- const prevRootState: RootState = current.memoizedState;\n- if (prevRootState.isDehydrated) {\n- const root: FiberRoot = finishedWork.stateNode;\n- commitHydratedContainer(root.containerInfo);\n- }\n+ const root: FiberRoot = finishedWork.stateNode;\n+ if (root.isDehydrated) {\n+ \/\/ We've just hydrated. No need to hydrate again.\n+ root.isDehydrated = false;\n+ commitHydratedContainer(root.containerInfo);\n }\n }\n return;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex bea984c19f..2a44cf94a1 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -8,7 +8,6 @@\n *\/\n \n import type {Fiber} from '.\/ReactInternalTypes';\n-import type {RootState} from '.\/ReactFiberRoot.new';\n import type {Lanes, Lane} from '.\/ReactFiberLane.new';\n import type {\n ReactScopeInstance,\n@@ -891,29 +890,12 @@ function completeWork(\n \/\/ If we hydrated, then we'll need to schedule an update for\n \/\/ the commit side-effects on the root.\n markUpdate(workInProgress);\n- } else {\n- if (current !== null) {\n- const prevState: RootState = current.memoizedState;\n- if (\n- \/\/ Check if this is a client root\n- !prevState.isDehydrated ||\n- \/\/ Check if we reverted to client rendering (e.g. due to an error)\n- (workInProgress.flags & ForceClientRender) !== NoFlags\n- ) {\n- \/\/ Schedule an effect to clear this container at the start of the\n- \/\/ next commit. This handles the case of React rendering into a\n- \/\/ container with previous children. It's also safe to do for\n- \/\/ updates too, because current.child would only be null if the\n- \/\/ previous render was null (so the container would already\n- \/\/ be empty).\n- workInProgress.flags |= Snapshot;\n-\n- \/\/ If this was a forced client render, there may have been\n- \/\/ recoverable errors during first hydration attempt. If so, add\n- \/\/ them to a queue so we can log them in the commit phase.\n- upgradeHydrationErrorsToRecoverable();\n- }\n- }\n+ } else if (!fiberRoot.isDehydrated) {\n+ \/\/ Schedule an effect to clear this container at the start of the next commit.\n+ \/\/ This handles the case of React rendering into a container with previous children.\n+ \/\/ It's also safe to do for updates too, because current.child would only be null\n+ \/\/ if the previous render was null (so the container would already be empty).\n+ workInProgress.flags |= Snapshot;\n }\n }\n updateHostContainer(current, workInProgress);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex ef3d4f7979..f02a20222d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -8,7 +8,6 @@\n *\/\n \n import type {Fiber} from '.\/ReactInternalTypes';\n-import type {RootState} from '.\/ReactFiberRoot.old';\n import type {Lanes, Lane} from '.\/ReactFiberLane.old';\n import type {\n ReactScopeInstance,\n@@ -891,29 +890,12 @@ function completeWork(\n \/\/ If we hydrated, then we'll need to schedule an update for\n \/\/ the commit side-effects on the root.\n markUpdate(workInProgress);\n- } else {\n- if (current !== null) {\n- const prevState: RootState = current.memoizedState;\n- if (\n- \/\/ Check if this is a client root\n- !prevState.isDehydrated ||\n- \/\/ Check if we reverted to client rendering (e.g. due to an error)\n- (workInProgress.flags & ForceClientRender) !== NoFlags\n- ) {\n- \/\/ Schedule an effect to clear this container at the start of the\n- \/\/ next commit. This handles the case of React rendering into a\n- \/\/ container with previous children. It's also safe to do for\n- \/\/ updates too, because current.child would only be null if the\n- \/\/ previous render was null (so the container would already\n- \/\/ be empty).\n- workInProgress.flags |= Snapshot;\n-\n- \/\/ If this was a forced client render, there may have been\n- \/\/ recoverable errors during first hydration attempt. If so, add\n- \/\/ them to a queue so we can log them in the commit phase.\n- upgradeHydrationErrorsToRecoverable();\n- }\n- }\n+ } else if (!fiberRoot.isDehydrated) {\n+ \/\/ Schedule an effect to clear this container at the start of the next commit.\n+ \/\/ This handles the case of React rendering into a container with previous children.\n+ \/\/ It's also safe to do for updates too, because current.child would only be null\n+ \/\/ if the previous render was null (so the container would already be empty).\n+ workInProgress.flags |= Snapshot;\n }\n }\n updateHostContainer(current, workInProgress);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\nindex 849470551a..8607b227e9 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\n@@ -48,7 +48,6 @@ import {\n isContextProvider as isLegacyContextProvider,\n } from '.\/ReactFiberContext.new';\n import {createFiberRoot} from '.\/ReactFiberRoot.new';\n-import {isRootDehydrated} from '.\/ReactFiberShellHydration';\n import {\n injectInternals,\n markRenderScheduled,\n@@ -246,6 +245,9 @@ function findHostInstanceWithWarning(\n export function createContainer(\n containerInfo: Container,\n tag: RootTag,\n+ \/\/ TODO: We can remove hydration-specific stuff from createContainer once\n+ \/\/ we delete legacy mode. The new root API uses createHydrationContainer.\n+ hydrate: boolean,\n hydrationCallbacks: null | SuspenseHydrationCallbacks,\n isStrictMode: boolean,\n concurrentUpdatesByDefaultOverride: null | boolean,\n@@ -253,13 +255,10 @@ export function createContainer(\n onRecoverableError: (error: mixed) => void,\n transitionCallbacks: null | TransitionTracingCallbacks,\n ): OpaqueRoot {\n- const hydrate = false;\n- const initialChildren = null;\n return createFiberRoot(\n containerInfo,\n tag,\n hydrate,\n- initialChildren,\n hydrationCallbacks,\n isStrictMode,\n concurrentUpdatesByDefaultOverride,\n@@ -271,8 +270,6 @@ export function createContainer(\n \n export function createHydrationContainer(\n initialChildren: ReactNodeList,\n- \/\/ TODO: Remove `callback` when we delete legacy mode.\n- callback: ?Function,\n containerInfo: Container,\n tag: RootTag,\n hydrationCallbacks: null | SuspenseHydrationCallbacks,\n@@ -287,7 +284,6 @@ export function createHydrationContainer(\n containerInfo,\n tag,\n hydrate,\n- initialChildren,\n hydrationCallbacks,\n isStrictMode,\n concurrentUpdatesByDefaultOverride,\n@@ -306,9 +302,9 @@ export function createHydrationContainer(\n const eventTime = requestEventTime();\n const lane = requestUpdateLane(current);\n const update = createUpdate(eventTime, lane);\n- update.payload = {isDehydrated: false};\n- update.callback =\n- callback !== undefined && callback !== null ? callback : null;\n+ \/\/ Caution: React DevTools currently depends on this property\n+ \/\/ being called \"element\".\n+ update.payload = {element: initialChildren};\n enqueueUpdate(current, update, lane);\n scheduleInitialHydrationOnRoot(root, lane, eventTime);\n \n@@ -413,7 +409,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {\n switch (fiber.tag) {\n case HostRoot:\n const root: FiberRoot = fiber.stateNode;\n- if (isRootDehydrated(root)) {\n+ if (root.isDehydrated) {\n \/\/ Flush the first scheduled \"update\".\n const lanes = getHighestPriorityPendingLanes(root);\n flushRoot(root, lanes);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\nindex f7166095ba..4970b685b1 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\n@@ -48,7 +48,6 @@ import {\n isContextProvider as isLegacyContextProvider,\n } from '.\/ReactFiberContext.old';\n import {createFiberRoot} from '.\/ReactFiberRoot.old';\n-import {isRootDehydrated} from '.\/ReactFiberShellHydration';\n import {\n injectInternals,\n markRenderScheduled,\n@@ -246,6 +245,9 @@ function findHostInstanceWithWarning(\n export function createContainer(\n containerInfo: Container,\n tag: RootTag,\n+ \/\/ TODO: We can remove hydration-specific stuff from createContainer once\n+ \/\/ we delete legacy mode. The new root API uses createHydrationContainer.\n+ hydrate: boolean,\n hydrationCallbacks: null | SuspenseHydrationCallbacks,\n isStrictMode: boolean,\n concurrentUpdatesByDefaultOverride: null | boolean,\n@@ -253,13 +255,10 @@ export function createContainer(\n onRecoverableError: (error: mixed) => void,\n transitionCallbacks: null | TransitionTracingCallbacks,\n ): OpaqueRoot {\n- const hydrate = false;\n- const initialChildren = null;\n return createFiberRoot(\n containerInfo,\n tag,\n hydrate,\n- initialChildren,\n hydrationCallbacks,\n isStrictMode,\n concurrentUpdatesByDefaultOverride,\n@@ -271,8 +270,6 @@ export function createContainer(\n \n export function createHydrationContainer(\n initialChildren: ReactNodeList,\n- \/\/ TODO: Remove `callback` when we delete legacy mode.\n- callback: ?Function,\n containerInfo: Container,\n tag: RootTag,\n hydrationCallbacks: null | SuspenseHydrationCallbacks,\n@@ -287,7 +284,6 @@ export function createHydrationContainer(\n containerInfo,\n tag,\n hydrate,\n- initialChildren,\n hydrationCallbacks,\n isStrictMode,\n concurrentUpdatesByDefaultOverride,\n@@ -306,9 +302,9 @@ export function createHydrationContainer(\n const eventTime = requestEventTime();\n const lane = requestUpdateLane(current);\n const update = createUpdate(eventTime, lane);\n- update.payload = {isDehydrated: false};\n- update.callback =\n- callback !== undefined && callback !== null ? callback : null;\n+ \/\/ Caution: React DevTools currently depends on this property\n+ \/\/ being called \"element\".\n+ update.payload = {element: initialChildren};\n enqueueUpdate(current, update, lane);\n scheduleInitialHydrationOnRoot(root, lane, eventTime);\n \n@@ -413,7 +409,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {\n switch (fiber.tag) {\n case HostRoot:\n const root: FiberRoot = fiber.stateNode;\n- if (isRootDehydrated(root)) {\n+ if (root.isDehydrated) {\n \/\/ Flush the first scheduled \"update\".\n const lanes = getHighestPriorityPendingLanes(root);\n flushRoot(root, lanes);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\nindex 7ff03ceead..00dd694be4 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.new.js\n@@ -7,7 +7,6 @@\n * @flow\n *\/\n \n-import type {ReactNodeList} from 'shared\/ReactTypes';\n import type {\n FiberRoot,\n SuspenseHydrationCallbacks,\n@@ -40,8 +39,7 @@ import {createCache, retainCache} from '.\/ReactFiberCacheComponent.new';\n \n export type RootState = {\n element: any,\n- isDehydrated: boolean,\n- cache: Cache,\n+ cache: Cache | null,\n transitions: Transitions | null,\n };\n \n@@ -61,6 +59,7 @@ function FiberRootNode(\n this.timeoutHandle = noTimeout;\n this.context = null;\n this.pendingContext = null;\n+ this.isDehydrated = hydrate;\n this.callbackNode = null;\n this.callbackPriority = NoLane;\n this.eventTimes = createLaneMap(NoLanes);\n@@ -129,7 +128,6 @@ export function createFiberRoot(\n containerInfo: any,\n tag: RootTag,\n hydrate: boolean,\n- initialChildren: ReactNodeList,\n hydrationCallbacks: null | SuspenseHydrationCallbacks,\n isStrictMode: boolean,\n concurrentUpdatesByDefaultOverride: null | boolean,\n@@ -180,17 +178,15 @@ export function createFiberRoot(\n root.pooledCache = initialCache;\n retainCache(initialCache);\n const initialState: RootState = {\n- element: initialChildren,\n- isDehydrated: hydrate,\n+ element: null,\n cache: initialCache,\n transitions: null,\n };\n uninitializedFiber.memoizedState = initialState;\n } else {\n const initialState: RootState = {\n- element: initialChildren,\n- isDehydrated: hydrate,\n- cache: (null: any), \/\/ not enabled yet\n+ element: null,\n+ cache: null,\n transitions: null,\n };\n uninitializedFiber.memoizedState = initialState;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\nindex 179b9c17ae..1e561e49fa 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberRoot.old.js\n@@ -7,7 +7,6 @@\n * @flow\n *\/\n \n-import type {ReactNodeList} from 'shared\/ReactTypes';\n import type {\n FiberRoot,\n SuspenseHydrationCallbacks,\n@@ -40,8 +39,7 @@ import {createCache, retainCache} from '.\/ReactFiberCacheComponent.old';\n \n export type RootState = {\n element: any,\n- isDehydrated: boolean,\n- cache: Cache,\n+ cache: Cache | null,\n transitions: Transitions | null,\n };\n \n@@ -61,6 +59,7 @@ function FiberRootNode(\n this.timeoutHandle = noTimeout;\n this.context = null;\n this.pendingContext = null;\n+ this.isDehydrated = hydrate;\n this.callbackNode = null;\n this.callbackPriority = NoLane;\n this.eventTimes = createLaneMap(NoLanes);\n@@ -129,7 +128,6 @@ export function createFiberRoot(\n containerInfo: any,\n tag: RootTag,\n hydrate: boolean,\n- initialChildren: ReactNodeList,\n hydrationCallbacks: null | SuspenseHydrationCallbacks,\n isStrictMode: boolean,\n concurrentUpdatesByDefaultOverride: null | boolean,\n@@ -180,17 +178,15 @@ export function createFiberRoot(\n root.pooledCache = initialCache;\n retainCache(initialCache);\n const initialState: RootState = {\n- element: initialChildren,\n- isDehydrated: hydrate,\n+ element: null,\n cache: initialCache,\n transitions: null,\n };\n uninitializedFiber.memoizedState = initialState;\n } else {\n const initialState: RootState = {\n- element: initialChildren,\n- isDehydrated: hydrate,\n- cache: (null: any), \/\/ not enabled yet\n+ element: null,\n+ cache: null,\n transitions: null,\n };\n uninitializedFiber.memoizedState = initialState;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberShellHydration.js b\/packages\/react-reconciler\/src\/ReactFiberShellHydration.js\ndeleted file mode 100644\nindex caadb978f6..0000000000\n--- a\/packages\/react-reconciler\/src\/ReactFiberShellHydration.js\n+++ \/dev\/null\n@@ -1,19 +0,0 @@\n-\/**\n- * Copyright (c) Facebook, Inc. and its affiliates.\n- *\n- * This source code is licensed under the MIT license found in the\n- * LICENSE file in the root directory of this source tree.\n- *\n- * @flow\n- *\/\n-\n-import type {FiberRoot} from '.\/ReactInternalTypes';\n-import type {RootState} from '.\/ReactFiberRoot.new';\n-\n-\/\/ This is imported by the event replaying implementation in React DOM. It's\n-\/\/ in a separate file to break a circular dependency between the renderer and\n-\/\/ the reconciler.\n-export function isRootDehydrated(root: FiberRoot) {\n- const currentState: RootState = root.current.memoizedState;\n- return currentState.isDehydrated;\n-}\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\nindex 558440effa..7223ad7d05 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n@@ -88,7 +88,6 @@ import {\n createWorkInProgress,\n assignFiberPropertiesInDEV,\n } from '.\/ReactFiber.new';\n-import {isRootDehydrated} from '.\/ReactFiberShellHydration';\n import {NoMode, ProfileMode, ConcurrentMode} from '.\/ReactTypeOfMode';\n import {\n HostRoot,\n@@ -110,7 +109,6 @@ import {\n StoreConsistency,\n HostEffectMask,\n Hydrating,\n- ForceClientRender,\n BeforeMutationMask,\n MutationMask,\n LayoutMask,\n@@ -583,7 +581,34 @@ export function scheduleUpdateOnFiber(\n }\n }\n \n- if (root === workInProgressRoot) {\n+ if (root.isDehydrated && root.tag !== LegacyRoot) {\n+ \/\/ This root's shell hasn't hydrated yet. Revert to client rendering.\n+ if (workInProgressRoot === root) {\n+ \/\/ If this happened during an interleaved event, interrupt the\n+ \/\/ in-progress hydration. Theoretically, we could attempt to force a\n+ \/\/ synchronous hydration before switching to client rendering, but the\n+ \/\/ most common reason the shell hasn't hydrated yet is because it\n+ \/\/ suspended. So it's very likely to suspend again anyway. For\n+ \/\/ simplicity, we'll skip that atttempt and go straight to\n+ \/\/ client rendering.\n+ \/\/\n+ \/\/ Another way to model this would be to give the initial hydration its\n+ \/\/ own special lane. However, it may not be worth adding a lane solely\n+ \/\/ for this purpose, so we'll wait until we find another use case before\n+ \/\/ adding it.\n+ \/\/\n+ \/\/ TODO: Consider only interrupting hydration if the priority of the\n+ \/\/ update is higher than default.\n+ prepareFreshStack(root, NoLanes);\n+ }\n+ root.isDehydrated = false;\n+ const error = new Error(\n+ 'This root received an early update, before anything was able ' +\n+ 'hydrate. Switched the entire root to client rendering.',\n+ );\n+ const onRecoverableError = root.onRecoverableError;\n+ onRecoverableError(error);\n+ } else if (root === workInProgressRoot) {\n \/\/ TODO: Consolidate with `isInterleavedUpdate` check\n \n \/\/ Received an update to a tree that's in the middle of rendering. Mark\n@@ -991,42 +1016,28 @@ function performConcurrentWorkOnRoot(root, didTimeout) {\n function recoverFromConcurrentError(root, errorRetryLanes) {\n \/\/ If an error occurred during hydration, discard server response and fall\n \/\/ back to client side render.\n-\n- \/\/ Before rendering again, save the errors from the previous attempt.\n- const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;\n-\n- if (isRootDehydrated(root)) {\n- \/\/ The shell failed to hydrate. Set a flag to force a client rendering\n- \/\/ during the next attempt. To do this, we call prepareFreshStack now\n- \/\/ to create the root work-in-progress fiber. This is a bit weird in terms\n- \/\/ of factoring, because it relies on renderRootSync not calling\n- \/\/ prepareFreshStack again in the call below, which happens because the\n- \/\/ root and lanes haven't changed.\n- \/\/\n- \/\/ TODO: I think what we should do is set ForceClientRender inside\n- \/\/ throwException, like we do for nested Suspense boundaries. The reason\n- \/\/ it's here instead is so we can switch to the synchronous work loop, too.\n- \/\/ Something to consider for a future refactor.\n- const rootWorkInProgress = prepareFreshStack(root, errorRetryLanes);\n- rootWorkInProgress.flags |= ForceClientRender;\n+ if (root.isDehydrated) {\n+ root.isDehydrated = false;\n if (__DEV__) {\n errorHydratingContainer(root.containerInfo);\n }\n+ const error = new Error(\n+ 'There was an error while hydrating. Because the error happened outside ' +\n+ 'of a Suspense boundary, the entire root will switch to ' +\n+ 'client rendering.',\n+ );\n+ renderDidError(error);\n }\n \n+ const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;\n const exitStatus = renderRootSync(root, errorRetryLanes);\n if (exitStatus !== RootErrored) {\n \/\/ Successfully finished rendering on retry\n-\n- \/\/ The errors from the failed first attempt have been recovered. Add\n- \/\/ them to the collection of recoverable errors. We'll log them in the\n- \/\/ commit phase.\n- const errorsFromSecondAttempt = workInProgressRootRecoverableErrors;\n- workInProgressRootRecoverableErrors = errorsFromFirstAttempt;\n- \/\/ The errors from the second attempt should be queued after the errors\n- \/\/ from the first attempt, to preserve the causal sequence.\n- if (errorsFromSecondAttempt !== null) {\n- queueRecoverableErrors(errorsFromSecondAttempt);\n+ if (errorsFromFirstAttempt !== null) {\n+ \/\/ The errors from the failed first attempt have been recovered. Add\n+ \/\/ them to the collection of recoverable errors. We'll log them in the\n+ \/\/ commit phase.\n+ queueRecoverableErrors(errorsFromFirstAttempt);\n }\n } else {\n \/\/ The UI failed to recover.\n@@ -1442,7 +1453,7 @@ export function popRenderLanes(fiber: Fiber) {\n popFromStack(subtreeRenderLanesCursor, fiber);\n }\n \n-function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {\n+function prepareFreshStack(root: FiberRoot, lanes: Lanes) {\n root.finishedWork = null;\n root.finishedLanes = NoLanes;\n \n@@ -1468,8 +1479,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {\n }\n }\n workInProgressRoot = root;\n- const rootWorkInProgress = createWorkInProgress(root.current, null);\n- workInProgress = rootWorkInProgress;\n+ workInProgress = createWorkInProgress(root.current, null);\n workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;\n workInProgressRootExitStatus = RootInProgress;\n workInProgressRootFatalError = null;\n@@ -1485,8 +1495,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {\n if (__DEV__) {\n ReactStrictModeWarnings.discardPendingWarnings();\n }\n-\n- return rootWorkInProgress;\n }\n \n function handleError(root, thrownValue): void {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\nindex c1c090d82b..d8bb6b16e2 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n@@ -88,7 +88,6 @@ import {\n createWorkInProgress,\n assignFiberPropertiesInDEV,\n } from '.\/ReactFiber.old';\n-import {isRootDehydrated} from '.\/ReactFiberShellHydration';\n import {NoMode, ProfileMode, ConcurrentMode} from '.\/ReactTypeOfMode';\n import {\n HostRoot,\n@@ -110,7 +109,6 @@ import {\n StoreConsistency,\n HostEffectMask,\n Hydrating,\n- ForceClientRender,\n BeforeMutationMask,\n MutationMask,\n LayoutMask,\n@@ -583,7 +581,34 @@ export function scheduleUpdateOnFiber(\n }\n }\n \n- if (root === workInProgressRoot) {\n+ if (root.isDehydrated && root.tag !== LegacyRoot) {\n+ \/\/ This root's shell hasn't hydrated yet. Revert to client rendering.\n+ if (workInProgressRoot === root) {\n+ \/\/ If this happened during an interleaved event, interrupt the\n+ \/\/ in-progress hydration. Theoretically, we could attempt to force a\n+ \/\/ synchronous hydration before switching to client rendering, but the\n+ \/\/ most common reason the shell hasn't hydrated yet is because it\n+ \/\/ suspended. So it's very likely to suspend again anyway. For\n+ \/\/ simplicity, we'll skip that atttempt and go straight to\n+ \/\/ client rendering.\n+ \/\/\n+ \/\/ Another way to model this would be to give the initial hydration its\n+ \/\/ own special lane. However, it may not be worth adding a lane solely\n+ \/\/ for this purpose, so we'll wait until we find another use case before\n+ \/\/ adding it.\n+ \/\/\n+ \/\/ TODO: Consider only interrupting hydration if the priority of the\n+ \/\/ update is higher than default.\n+ prepareFreshStack(root, NoLanes);\n+ }\n+ root.isDehydrated = false;\n+ const error = new Error(\n+ 'This root received an early update, before anything was able ' +\n+ 'hydrate. Switched the entire root to client rendering.',\n+ );\n+ const onRecoverableError = root.onRecoverableError;\n+ onRecoverableError(error);\n+ } else if (root === workInProgressRoot) {\n \/\/ TODO: Consolidate with `isInterleavedUpdate` check\n \n \/\/ Received an update to a tree that's in the middle of rendering. Mark\n@@ -991,42 +1016,28 @@ function performConcurrentWorkOnRoot(root, didTimeout) {\n function recoverFromConcurrentError(root, errorRetryLanes) {\n \/\/ If an error occurred during hydration, discard server response and fall\n \/\/ back to client side render.\n-\n- \/\/ Before rendering again, save the errors from the previous attempt.\n- const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;\n-\n- if (isRootDehydrated(root)) {\n- \/\/ The shell failed to hydrate. Set a flag to force a client rendering\n- \/\/ during the next attempt. To do this, we call prepareFreshStack now\n- \/\/ to create the root work-in-progress fiber. This is a bit weird in terms\n- \/\/ of factoring, because it relies on renderRootSync not calling\n- \/\/ prepareFreshStack again in the call below, which happens because the\n- \/\/ root and lanes haven't changed.\n- \/\/\n- \/\/ TODO: I think what we should do is set ForceClientRender inside\n- \/\/ throwException, like we do for nested Suspense boundaries. The reason\n- \/\/ it's here instead is so we can switch to the synchronous work loop, too.\n- \/\/ Something to consider for a future refactor.\n- const rootWorkInProgress = prepareFreshStack(root, errorRetryLanes);\n- rootWorkInProgress.flags |= ForceClientRender;\n+ if (root.isDehydrated) {\n+ root.isDehydrated = false;\n if (__DEV__) {\n errorHydratingContainer(root.containerInfo);\n }\n+ const error = new Error(\n+ 'There was an error while hydrating. Because the error happened outside ' +\n+ 'of a Suspense boundary, the entire root will switch to ' +\n+ 'client rendering.',\n+ );\n+ renderDidError(error);\n }\n \n+ const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;\n const exitStatus = renderRootSync(root, errorRetryLanes);\n if (exitStatus !== RootErrored) {\n \/\/ Successfully finished rendering on retry\n-\n- \/\/ The errors from the failed first attempt have been recovered. Add\n- \/\/ them to the collection of recoverable errors. We'll log them in the\n- \/\/ commit phase.\n- const errorsFromSecondAttempt = workInProgressRootRecoverableErrors;\n- workInProgressRootRecoverableErrors = errorsFromFirstAttempt;\n- \/\/ The errors from the second attempt should be queued after the errors\n- \/\/ from the first attempt, to preserve the causal sequence.\n- if (errorsFromSecondAttempt !== null) {\n- queueRecoverableErrors(errorsFromSecondAttempt);\n+ if (errorsFromFirstAttempt !== null) {\n+ \/\/ The errors from the failed first attempt have been recovered. Add\n+ \/\/ them to the collection of recoverable errors. We'll log them in the\n+ \/\/ commit phase.\n+ queueRecoverableErrors(errorsFromFirstAttempt);\n }\n } else {\n \/\/ The UI failed to recover.\n@@ -1442,7 +1453,7 @@ export function popRenderLanes(fiber: Fiber) {\n popFromStack(subtreeRenderLanesCursor, fiber);\n }\n \n-function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {\n+function prepareFreshStack(root: FiberRoot, lanes: Lanes) {\n root.finishedWork = null;\n root.finishedLanes = NoLanes;\n \n@@ -1468,8 +1479,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {\n }\n }\n workInProgressRoot = root;\n- const rootWorkInProgress = createWorkInProgress(root.current, null);\n- workInProgress = rootWorkInProgress;\n+ workInProgress = createWorkInProgress(root.current, null);\n workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;\n workInProgressRootExitStatus = RootInProgress;\n workInProgressRootFatalError = null;\n@@ -1485,8 +1495,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {\n if (__DEV__) {\n ReactStrictModeWarnings.discardPendingWarnings();\n }\n-\n- return rootWorkInProgress;\n }\n \n function handleError(root, thrownValue): void {\ndiff --git a\/packages\/react-reconciler\/src\/ReactInternalTypes.js b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\nindex 1fa3d4b668..dd2e09c03b 100644\n--- a\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n+++ b\/packages\/react-reconciler\/src\/ReactInternalTypes.js\n@@ -213,6 +213,8 @@ type BaseFiberRootProperties = {|\n \/\/ Top context object, used by renderSubtreeIntoContainer\n context: Object | null,\n pendingContext: Object | null,\n+ \/\/ Determines if we should attempt to hydrate on the initial mount\n+ +isDehydrated: boolean,\n \n \/\/ Used by useMutableSource hook to avoid tearing during hydration.\n mutableSourceEagerHydrationData?: Array<\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js\nindex 82e23de996..d0c3d5b236 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js\n@@ -72,6 +72,7 @@ describe('ReactFiberHostContext', () => {\n const container = Renderer.createContainer(\n \/* root: *\/ null,\n ConcurrentRoot,\n+ false,\n null,\n false,\n '',\n@@ -135,6 +136,7 @@ describe('ReactFiberHostContext', () => {\n const container = Renderer.createContainer(\n rootContext,\n ConcurrentRoot,\n+ false,\n null,\n false,\n '',\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\nindex 76911d701d..e850086439 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n@@ -473,6 +473,7 @@ function create(element: React$Element, options: TestRendererOptions) {\n let root: FiberRoot | null = createContainer(\n container,\n isConcurrent ? ConcurrentRoot : LegacyRoot,\n+ false,\n null,\n isStrictMode,\n concurrentUpdatesByDefault,\n","files":[{"status":"M","path":"packages\/react-art\/src\/ReactART.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMFizzShellHydration-test.js"},{"status":"M","path":"packages\/react-dom\/src\/__tests__\/ReactDOMRoot-test.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMLegacy.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMRoot.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js"},{"status":"M","path":"packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFabric.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeRenderer.js"},{"status":"M","path":"packages\/react-noop-renderer\/src\/createReactNoop.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\/ReactFiberReconciler.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberReconciler.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberRoot.old.js"},{"status":"D","path":"packages\/react-reconciler\/src\/ReactFiberShellHydration.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\/ReactInternalTypes.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactTestRenderer.js"}],"body":"","parents":["02b65fd8c5dbc6bfe2c976841f2f70a593ac9129"],"commit":{"revision":"832e2987e01aa357c3b2e551acae0682ca36fb14","authorName":"Andrew Clark","shortRevision":"832e2987e0","authorEmail":"git@andrewclark.io","authoredAt":"2022-03-11T21:31:23-05:00","subject":"Revert accdientally merged PR (#24081)"}}

dillon1000/react

Files changed