Remove legacy hydration mode

Author: sebmarkbage

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -330,7 +330,6 @@ function normalizeMarkupForTextOrAttribute(markup: mixed): string {
 export function checkForUnmatchedText(
   serverText: string,
   clientText: string | number | bigint,
-  isConcurrentMode: boolean,
   shouldWarnDev: boolean,
 ) {
   const normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
@@ -352,7 +351,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.');
@@ -2746,7 +2745,6 @@ export function diffHydratedProperties(
   domElement: Element,
   tag: string,
   props: Object,
-  isConcurrentMode: boolean,
   shouldWarnDev: boolean,
   hostContext: HostContext,
 ): void {
@@ -2865,14 +2863,9 @@ export function diffHydratedProperties(
     // $FlowFixMe[unsafe-addition] Flow doesn't want us to use `+` operator with string and bigint
     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.
@@ -2941,11 +2934,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;
 }

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -30,8 +30,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';
@@ -1370,19 +1368,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(
@@ -1407,12 +1393,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(
@@ -1508,15 +1489,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(
@@ -1525,16 +1500,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);
   }
 }
 
@@ -1577,17 +1546,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));
     }
   }
 }
@@ -1658,12 +1624,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);
   }
 }
 
@@ -1672,12 +1635,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);
   }
 }
 

packages/react-dom/index.classic.fb.js

@@ -24,7 +24,6 @@ export {
   hydrateRoot,
   findDOMNode,
   flushSync,
-  hydrate,
   render,
   unmountComponentAtNode,
   unstable_batchedUpdates,

packages/react-dom/index.js

@@ -16,7 +16,6 @@ export {
   hydrateRoot,
   findDOMNode,
   flushSync,
-  hydrate,
   render,
   unmountComponentAtNode,
   unstable_batchedUpdates,

packages/react-dom/index.stable.js

@@ -14,7 +14,6 @@ export {
   hydrateRoot,
   findDOMNode,
   flushSync,
-  hydrate,
   render,
   unmountComponentAtNode,
   unstable_batchedUpdates,

packages/react-dom/src/__tests__/ReactDOMServerIntegrationReconnecting-test.js

@@ -12,7 +12,6 @@
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
 let React;
-let ReactDOM;
 let ReactDOMClient;
 let ReactDOMServer;
 
@@ -453,75 +452,3 @@ describe('ReactDOMServerIntegration', () => {
       ));
   });
 });
-
-describe('ReactDOMServerIntegration (legacy)', () => {
-  function initModules() {
-    // Reset warning cache.
-    jest.resetModules();
-
-    React = require('react');
-    ReactDOM = require('react-dom');
-    ReactDOMServer = require('react-dom/server');
-
-    // Make them available to the helpers.
-    return {
-      ReactDOM,
-      ReactDOMServer,
-    };
-  }
-
-  const {resetModules, expectMarkupMatch} =
-    ReactDOMServerIntegrationUtils(initModules);
-
-  beforeEach(() => {
-    resetModules();
-  });
-
-  // @gate !disableLegacyMode
-  it('legacy mode can explicitly ignore errors reconnecting different element types of children', () =>
-    expectMarkupMatch(
-      <div>
-        <div />
-      </div>,
-      <div suppressHydrationWarning={true}>
-        <span />
-      </div>,
-    ));
-
-  // @gate !disableLegacyMode
-  it('legacy mode can explicitly ignore reconnecting more children', () =>
-    expectMarkupMatch(
-      <div>
-        <div />
-      </div>,
-      <div suppressHydrationWarning={true}>
-        <div />
-        <div />
-      </div>,
-    ));
-
-  // @gate !disableLegacyMode
-  it('legacy mode can explicitly ignore reconnecting fewer children', () =>
-    expectMarkupMatch(
-      <div>
-        <div />
-        <div />
-      </div>,
-      <div suppressHydrationWarning={true}>
-        <div />
-      </div>,
-    ));
-
-  // @gate !disableLegacyMode
-  it('legacy mode can explicitly ignore reconnecting reordered children', () =>
-    expectMarkupMatch(
-      <div suppressHydrationWarning={true}>
-        <div />
-        <span />
-      </div>,
-      <div suppressHydrationWarning={true}>
-        <span />
-        <div />
-      </div>,
-    ));
-});

packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js

@@ -1487,75 +1487,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(deleted.length).toBe(1);
   });
 
-  // @gate !disableLegacyMode
-  it('warns and replaces the boundary content in legacy mode', async () => {
-    let suspend = false;
-    let resolve;
-    const promise = new Promise(resolvePromise => (resolve = resolvePromise));
-    const ref = React.createRef();
-
-    function Child() {
-      if (suspend) {
-        throw promise;
-      } else {
-        return 'Hello';
-      }
-    }
-
-    function App() {
-      return (
-        <div>
-          <Suspense fallback="Loading...">
-            <span ref={ref}>
-              <Child />
-            </span>
-          </Suspense>
-        </div>
-      );
-    }
-
-    // Don't suspend on the server.
-    suspend = false;
-    const finalHTML = ReactDOMServer.renderToString(<App />);
-
-    const container = document.createElement('div');
-    container.innerHTML = finalHTML;
-
-    const span = container.getElementsByTagName('span')[0];
-
-    // On the client we try to hydrate.
-    suspend = true;
-    await expect(async () => {
-      await act(() => {
-        ReactDOM.hydrate(<App />, container);
-      });
-    }).toErrorDev(
-      'Warning: 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.' +
-        '\n    in Suspense (at **)' +
-        '\n    in div (at **)' +
-        '\n    in App (at **)',
-    );
-
-    // We're now in loading state.
-    expect(container.textContent).toBe('Loading...');
-
-    const span2 = container.getElementsByTagName('span')[0];
-    // This is a new node.
-    expect(span).not.toBe(span2);
-    expect(ref.current).toBe(null);
-
-    // Resolving the promise should render the final content.
-    suspend = false;
-    await act(() => resolve());
-
-    // We should now have hydrated with a ref on the existing span.
-    expect(container.textContent).toBe('Hello');
-  });
-
   it('can insert siblings before the dehydrated boundary', async () => {
     let suspend = false;
     const promise = new Promise(() => {});