Skip to content

Commit

Permalink
Remove legacy hydration mode
Browse files Browse the repository at this point in the history
  • Loading branch information
sebmarkbage committed Feb 25, 2024
1 parent 239d06e commit e4244f4
Show file tree
Hide file tree
Showing 12 changed files with 32 additions and 344 deletions.
19 changes: 4 additions & 15 deletions packages/react-dom-bindings/src/client/ReactDOMComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,6 @@ function normalizeMarkupForTextOrAttribute(markup: mixed): string {
export function checkForUnmatchedText(
serverText: string,
clientText: string | number,
isConcurrentMode: boolean,
shouldWarnDev: boolean,
) {
const normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
Expand All @@ -349,7 +348,7 @@ export function checkForUnmatchedText(
}
}

if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
if (enableClientRenderFallbackOnTextMismatch) {
// In concurrent roots, we throw when there's a text mismatch and revert to
// client rendering, up to the nearest Suspense boundary.
throw new Error('Text content does not match server-rendered HTML.');
Expand Down Expand Up @@ -2706,7 +2705,6 @@ export function diffHydratedProperties(
domElement: Element,
tag: string,
props: Object,
isConcurrentMode: boolean,
shouldWarnDev: boolean,
hostContext: HostContext,
): void {
Expand Down Expand Up @@ -2820,14 +2818,9 @@ export function diffHydratedProperties(
if (typeof children === 'string' || typeof children === 'number') {
if (domElement.textContent !== '' + children) {
if (props.suppressHydrationWarning !== true) {
checkForUnmatchedText(
domElement.textContent,
children,
isConcurrentMode,
shouldWarnDev,
);
checkForUnmatchedText(domElement.textContent, children, shouldWarnDev);
}
if (!isConcurrentMode || !enableClientRenderFallbackOnTextMismatch) {
if (!enableClientRenderFallbackOnTextMismatch) {
// We really should be patching this in the commit phase but since
// this only affects legacy mode hydration which is deprecated anyway
// we can get away with it.
Expand Down Expand Up @@ -2896,11 +2889,7 @@ export function diffHydratedProperties(
}
}

export function diffHydratedText(
textNode: Text,
text: string,
isConcurrentMode: boolean,
): boolean {
export function diffHydratedText(textNode: Text, text: string): boolean {
const isDifferent = textNode.nodeValue !== text;
return isDifferent;
}
Expand Down
64 changes: 12 additions & 52 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ import type {
import {NotPending} from 'react-dom-bindings/src/shared/ReactDOMFormActions';
import {getCurrentRootHostContainer} from 'react-reconciler/src/ReactFiberHostContext';
import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
// TODO: Remove this deep import when we delete the legacy root API
import {ConcurrentMode, NoMode} from 'react-reconciler/src/ReactTypeOfMode';

import hasOwnProperty from 'shared/hasOwnProperty';
import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
Expand Down Expand Up @@ -1381,19 +1379,7 @@ export function hydrateInstance(
// get attached.
updateFiberProps(instance, props);

// TODO: Temporary hack to check if we're in a concurrent root. We can delete
// when the legacy root API is removed.
const isConcurrentMode =
((internalInstanceHandle: Fiber).mode & ConcurrentMode) !== NoMode;

diffHydratedProperties(
instance,
type,
props,
isConcurrentMode,
shouldWarnDev,
hostContext,
);
diffHydratedProperties(instance, type, props, shouldWarnDev, hostContext);
}

export function validateHydratableTextInstance(
Expand All @@ -1418,12 +1404,7 @@ export function hydrateTextInstance(
): boolean {
precacheFiberNode(internalInstanceHandle, textInstance);

// TODO: Temporary hack to check if we're in a concurrent root. We can delete
// when the legacy root API is removed.
const isConcurrentMode =
((internalInstanceHandle: Fiber).mode & ConcurrentMode) !== NoMode;

return diffHydratedText(textInstance, text, isConcurrentMode);
return diffHydratedText(textInstance, text);
}

export function hydrateSuspenseInstance(
Expand Down Expand Up @@ -1521,15 +1502,9 @@ export function didNotMatchHydratedContainerTextInstance(
parentContainer: Container,
textInstance: TextInstance,
text: string,
isConcurrentMode: boolean,
shouldWarnDev: boolean,
) {
checkForUnmatchedText(
textInstance.nodeValue,
text,
isConcurrentMode,
shouldWarnDev,
);
checkForUnmatchedText(textInstance.nodeValue, text, shouldWarnDev);
}

export function didNotMatchHydratedTextInstance(
Expand All @@ -1538,16 +1513,10 @@ export function didNotMatchHydratedTextInstance(
parentInstance: Instance,
textInstance: TextInstance,
text: string,
isConcurrentMode: boolean,
shouldWarnDev: boolean,
) {
if (parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
checkForUnmatchedText(
textInstance.nodeValue,
text,
isConcurrentMode,
shouldWarnDev,
);
checkForUnmatchedText(textInstance.nodeValue, text, shouldWarnDev);
}
}

Expand Down Expand Up @@ -1590,17 +1559,14 @@ export function didNotHydrateInstance(
parentProps: Props,
parentInstance: Instance,
instance: HydratableInstance,
isConcurrentMode: boolean,
) {
if (__DEV__) {
if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
if (instance.nodeType === ELEMENT_NODE) {
warnForDeletedHydratableElement(parentInstance, (instance: any));
} else if (instance.nodeType === COMMENT_NODE) {
// TODO: warnForDeletedHydratableSuspenseBoundary
} else {
warnForDeletedHydratableText(parentInstance, (instance: any));
}
if (instance.nodeType === ELEMENT_NODE) {
warnForDeletedHydratableElement(parentInstance, (instance: any));
} else if (instance.nodeType === COMMENT_NODE) {
// TODO: warnForDeletedHydratableSuspenseBoundary
} else {
warnForDeletedHydratableText(parentInstance, (instance: any));
}
}
}
Expand Down Expand Up @@ -1671,12 +1637,9 @@ export function didNotFindHydratableInstance(
parentInstance: Instance,
type: string,
props: Props,
isConcurrentMode: boolean,
) {
if (__DEV__) {
if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
warnForInsertedHydratedElement(parentInstance, type, props);
}
warnForInsertedHydratedElement(parentInstance, type, props);
}
}

Expand All @@ -1685,12 +1648,9 @@ export function didNotFindHydratableTextInstance(
parentProps: Props,
parentInstance: Instance,
text: string,
isConcurrentMode: boolean,
) {
if (__DEV__) {
if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
warnForInsertedHydratedText(parentInstance, text);
}
warnForInsertedHydratedText(parentInstance, text);
}
}

Expand Down
1 change: 0 additions & 1 deletion packages/react-dom/index.classic.fb.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export {
hydrateRoot,
findDOMNode,
flushSync,
hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
Expand Down
1 change: 0 additions & 1 deletion packages/react-dom/index.experimental.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export {
hydrateRoot,
findDOMNode,
flushSync,
hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
Expand Down
1 change: 0 additions & 1 deletion packages/react-dom/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ export {
hydrateRoot,
findDOMNode,
flushSync,
hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
Expand Down
1 change: 0 additions & 1 deletion packages/react-dom/index.stable.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export {
hydrateRoot,
findDOMNode,
flushSync,
hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
Expand Down
2 changes: 0 additions & 2 deletions packages/react-dom/src/client/ReactDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import type {
import {
findDOMNode,
render,
hydrate,
unstable_renderSubtreeIntoContainer,
unmountComponentAtNode,
} from './ReactDOMLegacy';
Expand Down Expand Up @@ -172,7 +171,6 @@ export {
ReactVersion as version,
// Disabled behind disableLegacyReactDOMAPIs
findDOMNode,
hydrate,
render,
unmountComponentAtNode,
// exposeConcurrentModeAPIs
Expand Down
40 changes: 0 additions & 40 deletions packages/react-dom/src/client/ReactDOMLegacy.js
Original file line number Diff line number Diff line change
Expand Up @@ -259,46 +259,6 @@ export function findDOMNode(
return findHostInstance(componentOrElement);
}

export function hydrate(
element: React$Node,
container: Container,
callback: ?Function,
): React$Component<any, any> | PublicInstance | null {
if (__DEV__) {
console.error(
'ReactDOM.hydrate is no longer supported in 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://reactjs.org/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<any>,
container: Container,
Expand Down
1 change: 0 additions & 1 deletion packages/react-dom/unstable_testing.classic.fb.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export {
createPortal,
findDOMNode,
flushSync,
hydrate,
render,
unmountComponentAtNode,
unstable_batchedUpdates,
Expand Down
6 changes: 0 additions & 6 deletions packages/react-reconciler/src/ReactFiber.js
Original file line number Diff line number Diff line change
Expand Up @@ -850,12 +850,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 {
Expand Down
23 changes: 1 addition & 22 deletions packages/react-reconciler/src/ReactFiberBeginWork.js
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,6 @@ import {
import {
NoLane,
NoLanes,
SyncLane,
OffscreenLane,
DefaultHydrationLane,
SomeRetryLane,
Expand Down Expand Up @@ -2738,18 +2737,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, <App />)' +
'.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
Expand Down Expand Up @@ -2789,15 +2777,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
Expand Down
Loading

0 comments on commit e4244f4

Please sign in to comment.