.',
- );
-
- // The content should've been client rendered and replaced the
- // existing div.
- expect(ref.current).not.toBe(div);
- // The HTML should be the same though.
- expect(element.innerHTML).toBe('
');
- });
-
- // @gate !disableLegacyMode
- it('Suspense + hydration in legacy mode (at root)', () => {
- const element = document.createElement('div');
- element.innerHTML = '
Hello World
';
- const div = element.firstChild;
- const ref = React.createRef();
- ReactDOM.hydrate(
-
- Hello World
- ,
- element,
- );
-
- // The content should've been client rendered.
- expect(ref.current).not.toBe(div);
- // Unfortunately, since we don't delete the tail at the root, a duplicate will remain.
- expect(element.innerHTML).toBe(
- '
Hello World
Hello World
',
- );
- });
-
- // @gate !disableLegacyMode
- it('Suspense + hydration in legacy mode with no fallback', () => {
- const element = document.createElement('div');
- element.innerHTML = '
Hello World
';
- const div = element.firstChild;
- const ref = React.createRef();
- ReactDOM.hydrate(
-
- Hello World
- ,
- element,
- );
-
- // The content should've been client rendered.
- expect(ref.current).not.toBe(div);
- // Unfortunately, since we don't delete the tail at the root, a duplicate will remain.
- expect(element.innerHTML).toBe(
- '
Hello World
Hello World
',
- );
- });
-
// regression test for https://github.com/facebook/react/issues/17170
it('should not warn if dangerouslySetInnerHtml=undefined', async () => {
const domElement = document.createElement('div');
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index e9c4479b028fb..015942131d01d 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -52,15 +52,11 @@ module.exports = function (initModules) {
async function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
if (forceHydrate) {
await act(() => {
- if (ReactDOMClient) {
- ReactDOMClient.hydrateRoot(domElement, reactElement, {
- onRecoverableError: () => {
- // TODO: assert on recoverable error count.
- },
- });
- } else {
- ReactDOM.hydrate(reactElement, domElement);
- }
+ ReactDOMClient.hydrateRoot(domElement, reactElement, {
+ onRecoverableError: () => {
+ // TODO: assert on recoverable error count.
+ },
+ });
});
} else {
await act(() => {
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 78fffeb41cb34..9f9ea849fd66d 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -21,7 +21,6 @@ import type {
import {
findDOMNode,
render,
- hydrate,
unstable_renderSubtreeIntoContainer,
unmountComponentAtNode,
} from './ReactDOMLegacy';
@@ -172,7 +171,6 @@ export {
ReactVersion as version,
// Disabled behind disableLegacyReactDOMAPIs
findDOMNode,
- hydrate,
render,
unmountComponentAtNode,
// exposeConcurrentModeAPIs
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 64fef73640b10..50cb6fbf94b10 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -260,54 +260,6 @@ export function findDOMNode(
return findHostInstance(componentOrElement);
}
-export function hydrate(
- element: React$Node,
- container: Container,
- callback: ?Function,
-): React$Component
| PublicInstance | null {
- if (disableLegacyMode) {
- if (__DEV__) {
- console.error(
- 'ReactDOM.hydrate was removed in React 19. Use hydrateRoot instead',
- );
- }
- throw new Error('ReactDOM: Unsupported Legacy Mode API.');
- }
- if (__DEV__) {
- console.error(
- 'ReactDOM.hydrate has not been supported since React 18. Use hydrateRoot ' +
- 'instead. Until you switch to the new API, your app will behave as ' +
- "if it's running React 17. Learn " +
- 'more: https://react.dev/link/switch-to-createroot',
- );
- }
-
- if (!isValidContainerLegacy(container)) {
- throw new Error('Target container is not a DOM element.');
- }
-
- if (__DEV__) {
- const isModernRoot =
- isContainerMarkedAsRoot(container) &&
- container._reactRootContainer === undefined;
- if (isModernRoot) {
- console.error(
- 'You are calling ReactDOM.hydrate() on a container that was previously ' +
- 'passed to ReactDOMClient.createRoot(). This is not supported. ' +
- 'Did you mean to call hydrateRoot(container, element)?',
- );
- }
- }
- // TODO: throw or warn if we couldn't hydrate?
- return legacyRenderSubtreeIntoContainer(
- null,
- element,
- container,
- true,
- callback,
- );
-}
-
export function render(
element: React$Element,
container: Container,
diff --git a/packages/react-dom/unstable_testing.classic.fb.js b/packages/react-dom/unstable_testing.classic.fb.js
index 6dd68f3669dc3..9958b22cc3277 100644
--- a/packages/react-dom/unstable_testing.classic.fb.js
+++ b/packages/react-dom/unstable_testing.classic.fb.js
@@ -11,7 +11,6 @@ export {
createPortal,
findDOMNode,
flushSync,
- hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
diff --git a/packages/react-dom/unstable_testing.js b/packages/react-dom/unstable_testing.js
index 9729a427e4aa6..080b7340d11b2 100644
--- a/packages/react-dom/unstable_testing.js
+++ b/packages/react-dom/unstable_testing.js
@@ -11,7 +11,6 @@ export {
createPortal,
findDOMNode,
flushSync,
- hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
diff --git a/packages/react-dom/unstable_testing.stable.js b/packages/react-dom/unstable_testing.stable.js
index 453e8b4fdece7..855f6f1fc006a 100644
--- a/packages/react-dom/unstable_testing.stable.js
+++ b/packages/react-dom/unstable_testing.stable.js
@@ -11,7 +11,6 @@ export {
createPortal,
findDOMNode,
flushSync,
- hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index 194bababd644d..ce909b802530a 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -849,12 +849,6 @@ export function createFiberFromText(
return fiber;
}
-export function createFiberFromHostInstanceForDeletion(): Fiber {
- const fiber = createFiber(HostComponent, null, null, NoMode);
- fiber.elementType = 'DELETED';
- return fiber;
-}
-
export function createFiberFromDehydratedFragment(
dehydratedNode: SuspenseInstance,
): Fiber {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
index 0b788996bd10b..28e04f7c4b870 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -141,7 +141,6 @@ import {
import {
NoLane,
NoLanes,
- SyncLane,
OffscreenLane,
DefaultHydrationLane,
SomeRetryLane,
@@ -2743,18 +2742,7 @@ function mountDehydratedSuspenseComponent(
): null | Fiber {
// During the first pass, we'll bail out and not drill into the children.
// Instead, we'll leave the content in place and try to hydrate it later.
- if ((workInProgress.mode & ConcurrentMode) === NoMode) {
- if (__DEV__) {
- console.error(
- 'Cannot hydrate Suspense in legacy mode. Switch from ' +
- 'ReactDOM.hydrate(element, container) to ' +
- 'ReactDOMClient.hydrateRoot(container, )' +
- '.render(element) or remove the Suspense components from ' +
- 'the server rendered components.',
- );
- }
- workInProgress.lanes = laneToLanes(SyncLane);
- } else if (isSuspenseInstanceFallback(suspenseInstance)) {
+ if (isSuspenseInstanceFallback(suspenseInstance)) {
// This is a client-only boundary. Since we won't get any content from the server
// for this, we need to schedule that at a higher priority based on when it would
// have timed out. In theory we could render it in this pass but it would have the
@@ -2794,15 +2782,6 @@ function updateDehydratedSuspenseComponent(
// but after we've already committed once.
warnIfHydrating();
- if ((workInProgress.mode & ConcurrentMode) === NoMode) {
- return retrySuspenseComponentWithoutHydrating(
- current,
- workInProgress,
- renderLanes,
- null,
- );
- }
-
if (isSuspenseInstanceFallback(suspenseInstance)) {
// This boundary is in a permanent fallback state. In this case, we'll never
// get an update and we'll never be able to hydrate the final content. Let's just try the
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.js b/packages/react-reconciler/src/ReactFiberHydrationContext.js
index 90d87e13d7b33..11cb591ec9a8b 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.js
@@ -8,7 +8,6 @@
*/
import type {Fiber} from './ReactInternalTypes';
-import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
import type {
Instance,
TextInstance,
@@ -28,19 +27,9 @@ import {
HostRoot,
SuspenseComponent,
} from './ReactWorkTags';
-import {
- ChildDeletion,
- Placement,
- Hydrating,
- NoFlags,
- DidCapture,
-} from './ReactFiberFlags';
import {enableClientRenderFallbackOnTextMismatch} from 'shared/ReactFeatureFlags';
-import {
- createFiberFromHostInstanceForDeletion,
- createFiberFromDehydratedFragment,
-} from './ReactFiber';
+import {createFiberFromDehydratedFragment} from './ReactFiber';
import {
shouldSetTextContent,
supportsHydration,
@@ -168,14 +157,11 @@ function warnUnhydratedInstance(
}
case HostSingleton:
case HostComponent: {
- const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;
didNotHydrateInstance(
returnFiber.type,
returnFiber.memoizedProps,
returnFiber.stateNode,
instance,
- // TODO: Delete this argument when we remove the legacy root API.
- isConcurrentMode,
);
break;
}
@@ -192,23 +178,6 @@ function warnUnhydratedInstance(
}
}
-function deleteHydratableInstance(
- returnFiber: Fiber,
- instance: HydratableInstance,
-) {
- const childToDelete = createFiberFromHostInstanceForDeletion();
- childToDelete.stateNode = instance;
- childToDelete.return = returnFiber;
-
- const deletions = returnFiber.deletions;
- if (deletions === null) {
- returnFiber.deletions = [childToDelete];
- returnFiber.flags |= ChildDeletion;
- } else {
- deletions.push(childToDelete);
- }
-}
-
function warnNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
if (__DEV__) {
if (didSuspendOrErrorDEV) {
@@ -257,30 +226,22 @@ function warnNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
case HostComponent: {
const type = fiber.type;
const props = fiber.pendingProps;
- const isConcurrentMode =
- (returnFiber.mode & ConcurrentMode) !== NoMode;
didNotFindHydratableInstance(
parentType,
parentProps,
parentInstance,
type,
props,
- // TODO: Delete this argument when we remove the legacy root API.
- isConcurrentMode,
);
break;
}
case HostText: {
const text = fiber.pendingProps;
- const isConcurrentMode =
- (returnFiber.mode & ConcurrentMode) !== NoMode;
didNotFindHydratableTextInstance(
parentType,
parentProps,
parentInstance,
text,
- // TODO: Delete this argument when we remove the legacy root API.
- isConcurrentMode,
);
break;
}
@@ -330,9 +291,6 @@ function warnNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
}
}
}
-function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
- fiber.flags = (fiber.flags & ~Hydrating) | Placement;
-}
function tryHydrateInstance(fiber: Fiber, nextInstance: any) {
// fiber is a HostComponent Fiber
@@ -400,13 +358,6 @@ function tryHydrateSuspense(fiber: Fiber, nextInstance: any) {
return false;
}
-function shouldClientRenderOnMismatch(fiber: Fiber) {
- return (
- (fiber.mode & ConcurrentMode) !== NoMode &&
- (fiber.flags & DidCapture) === NoFlags
- );
-}
-
function throwOnHydrationMismatch(fiber: Fiber) {
throw new Error(
'Hydration failed because the initial UI does not match what was ' +
@@ -447,60 +398,12 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
currentHostContext,
);
- const initialInstance = nextHydratableInstance;
const nextInstance = nextHydratableInstance;
- if (!nextInstance) {
- if (shouldClientRenderOnMismatch(fiber)) {
- if (shouldKeepWarning) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- }
- throwOnHydrationMismatch(fiber);
- }
- // Nothing to hydrate. Make it an insertion.
- insertNonHydratedInstance((hydrationParentFiber: any), fiber);
+ if (!nextInstance || !tryHydrateInstance(fiber, nextInstance)) {
if (shouldKeepWarning) {
warnNonHydratedInstance((hydrationParentFiber: any), fiber);
}
- isHydrating = false;
- hydrationParentFiber = fiber;
- nextHydratableInstance = initialInstance;
- return;
- }
- const firstAttemptedInstance = nextInstance;
- if (!tryHydrateInstance(fiber, nextInstance)) {
- if (shouldClientRenderOnMismatch(fiber)) {
- if (shouldKeepWarning) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- }
- throwOnHydrationMismatch(fiber);
- }
- // If we can't hydrate this instance let's try the next one.
- // We use this as a heuristic. It's based on intuition and not data so it
- // might be flawed or unnecessary.
- nextHydratableInstance = getNextHydratableSibling(nextInstance);
- const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
- if (
- !nextHydratableInstance ||
- !tryHydrateInstance(fiber, nextHydratableInstance)
- ) {
- // Nothing to hydrate. Make it an insertion.
- insertNonHydratedInstance((hydrationParentFiber: any), fiber);
- if (shouldKeepWarning) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- }
- isHydrating = false;
- hydrationParentFiber = fiber;
- nextHydratableInstance = initialInstance;
- return;
- }
- // We matched the next one, we'll now assume that the first one was
- // superfluous and we'll delete it. Since we can't eagerly delete it
- // we'll have to schedule a deletion. To do that, this node needs a dummy
- // fiber associated with it.
- if (shouldKeepWarning) {
- warnUnhydratedInstance(prevHydrationParentFiber, firstAttemptedInstance);
- }
- deleteHydratableInstance(prevHydrationParentFiber, firstAttemptedInstance);
+ throwOnHydrationMismatch(fiber);
}
}
@@ -515,63 +418,12 @@ function tryToClaimNextHydratableTextInstance(fiber: Fiber): void {
const currentHostContext = getHostContext();
shouldKeepWarning = validateHydratableTextInstance(text, currentHostContext);
- const initialInstance = nextHydratableInstance;
const nextInstance = nextHydratableInstance;
- if (!nextInstance) {
- // We exclude non hydrabable text because we know there are no matching hydratables.
- // We either throw or insert depending on the render mode.
- if (shouldClientRenderOnMismatch(fiber)) {
- if (shouldKeepWarning) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- }
- throwOnHydrationMismatch(fiber);
- }
- // Nothing to hydrate. Make it an insertion.
- insertNonHydratedInstance((hydrationParentFiber: any), fiber);
+ if (!nextInstance || !tryHydrateText(fiber, nextInstance)) {
if (shouldKeepWarning) {
warnNonHydratedInstance((hydrationParentFiber: any), fiber);
}
- isHydrating = false;
- hydrationParentFiber = fiber;
- nextHydratableInstance = initialInstance;
- return;
- }
- const firstAttemptedInstance = nextInstance;
- if (!tryHydrateText(fiber, nextInstance)) {
- if (shouldClientRenderOnMismatch(fiber)) {
- if (shouldKeepWarning) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- }
- throwOnHydrationMismatch(fiber);
- }
- // If we can't hydrate this instance let's try the next one.
- // We use this as a heuristic. It's based on intuition and not data so it
- // might be flawed or unnecessary.
- nextHydratableInstance = getNextHydratableSibling(nextInstance);
- const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
-
- if (
- !nextHydratableInstance ||
- !tryHydrateText(fiber, nextHydratableInstance)
- ) {
- // Nothing to hydrate. Make it an insertion.
- insertNonHydratedInstance((hydrationParentFiber: any), fiber);
- if (shouldKeepWarning) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- }
- isHydrating = false;
- hydrationParentFiber = fiber;
- nextHydratableInstance = initialInstance;
- return;
- }
- // We matched the next one, we'll now assume that the first one was
- // superfluous and we'll delete it. Since we can't eagerly delete it
- // we'll have to schedule a deletion. To do that, this node needs a dummy
- // fiber associated with it.
- if (shouldKeepWarning) {
- warnUnhydratedInstance(prevHydrationParentFiber, firstAttemptedInstance);
- }
- deleteHydratableInstance(prevHydrationParentFiber, firstAttemptedInstance);
+ throwOnHydrationMismatch(fiber);
}
}
@@ -579,51 +431,10 @@ function tryToClaimNextHydratableSuspenseInstance(fiber: Fiber): void {
if (!isHydrating) {
return;
}
- const initialInstance = nextHydratableInstance;
const nextInstance = nextHydratableInstance;
- if (!nextInstance) {
- if (shouldClientRenderOnMismatch(fiber)) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- throwOnHydrationMismatch(fiber);
- }
- // Nothing to hydrate. Make it an insertion.
- insertNonHydratedInstance((hydrationParentFiber: any), fiber);
+ if (!nextInstance || !tryHydrateSuspense(fiber, nextInstance)) {
warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- isHydrating = false;
- hydrationParentFiber = fiber;
- nextHydratableInstance = initialInstance;
- return;
- }
- const firstAttemptedInstance = nextInstance;
- if (!tryHydrateSuspense(fiber, nextInstance)) {
- if (shouldClientRenderOnMismatch(fiber)) {
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- throwOnHydrationMismatch(fiber);
- }
- // If we can't hydrate this instance let's try the next one.
- // We use this as a heuristic. It's based on intuition and not data so it
- // might be flawed or unnecessary.
- nextHydratableInstance = getNextHydratableSibling(nextInstance);
- const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
-
- if (
- !nextHydratableInstance ||
- !tryHydrateSuspense(fiber, nextHydratableInstance)
- ) {
- // Nothing to hydrate. Make it an insertion.
- insertNonHydratedInstance((hydrationParentFiber: any), fiber);
- warnNonHydratedInstance((hydrationParentFiber: any), fiber);
- isHydrating = false;
- hydrationParentFiber = fiber;
- nextHydratableInstance = initialInstance;
- return;
- }
- // We matched the next one, we'll now assume that the first one was
- // superfluous and we'll delete it. Since we can't eagerly delete it
- // we'll have to schedule a deletion. To do that, this node needs a dummy
- // fiber associated with it.
- warnUnhydratedInstance(prevHydrationParentFiber, firstAttemptedInstance);
- deleteHydratableInstance(prevHydrationParentFiber, firstAttemptedInstance);
+ throwOnHydrationMismatch(fiber);
}
}
@@ -703,17 +514,13 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
switch (returnFiber.tag) {
case HostRoot: {
const parentContainer = returnFiber.stateNode.containerInfo;
- const isConcurrentMode =
- (returnFiber.mode & ConcurrentMode) !== NoMode;
didNotMatchHydratedContainerTextInstance(
parentContainer,
textInstance,
textContent,
- // TODO: Delete this argument when we remove the legacy root API.
- isConcurrentMode,
shouldWarnIfMismatchDev,
);
- if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
+ if (enableClientRenderFallbackOnTextMismatch) {
// In concurrent mode we never update the mismatched text,
// even if the error was ignored.
return false;
@@ -725,19 +532,15 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
const parentType = returnFiber.type;
const parentProps = returnFiber.memoizedProps;
const parentInstance = returnFiber.stateNode;
- const isConcurrentMode =
- (returnFiber.mode & ConcurrentMode) !== NoMode;
didNotMatchHydratedTextInstance(
parentType,
parentProps,
parentInstance,
textInstance,
textContent,
- // TODO: Delete this argument when we remove the legacy root API.
- isConcurrentMode,
shouldWarnIfMismatchDev,
);
- if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
+ if (enableClientRenderFallbackOnTextMismatch) {
// In concurrent mode we never update the mismatched text,
// even if the error was ignored.
return false;
@@ -861,18 +664,10 @@ function popHydrationState(fiber: Fiber): boolean {
}
}
if (shouldClear) {
- let nextInstance = nextHydratableInstance;
+ const nextInstance = nextHydratableInstance;
if (nextInstance) {
- if (shouldClientRenderOnMismatch(fiber)) {
- warnIfUnhydratedTailNodes(fiber);
- throwOnHydrationMismatch(fiber);
- } else {
- while (nextInstance) {
- warnUnhydratedInstance(fiber, nextInstance);
- deleteHydratableInstance(fiber, nextInstance);
- nextInstance = getNextHydratableSibling(nextInstance);
- }
- }
+ warnIfUnhydratedTailNodes(fiber);
+ throwOnHydrationMismatch(fiber);
}
}
popToNextHostParent(fiber);