Deprecate ReactDOM.render and ReactDOM.hydrate

These are no longer supported in React 18. They are replaced by the `createRoot` API. The warning includes a link to documentation of the new API. Currently it redirects to the corresponding working group post. Here's the PR to set up the redirect: reactjs/react.dev#3730 Many of our tests still use ReactDOM.render. We will need to gradually migrate them over to createRoot. In the meantime, I added the warnings to our internal warning filter.
facebook · Jun 9, 2021 · 6d8823d · 6d8823d
1 parent c6a4957
commit 6d8823d
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 22 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1154,9 +1154,15 @@ describe('ReactDOMFiber', () => {
     expect(ops).toEqual(['A']);
 
     if (__DEV__) {
-      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
       const errorCalls = console.error.calls.count();
-      for (let i = 0; i < errorCalls; i++) {
+      expect(console.error.calls.argsFor(0)[0]).toMatch(
+        'ReactDOM.render is no longer supported in React 18',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toMatch(
+        'ReactDOM.render is no longer supported in React 18',
+      );
+      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
+      for (let i = 2; i < errorCalls; i++) {
         expect(console.error.calls.argsFor(i)[0]).toMatch(
           'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
         );

diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -787,16 +787,22 @@ describe('ReactErrorBoundaries', () => {
 
   it('logs a single error when using error boundary', () => {
     const container = document.createElement('div');
-    expect(() =>
-      ReactDOM.render(
-        <ErrorBoundary>
-          <BrokenRender />
-        </ErrorBoundary>,
-        container,
-      ),
-    ).toErrorDev('The above error occurred in the <BrokenRender> component:', {
-      logAllErrors: true,
-    });
+    spyOnDev(console, 'error');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.render is no longer supported',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toContain(
+        'The above error occurred in the <BrokenRender> component:',
+      );
+    }
 
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
     expect(Scheduler).toHaveYielded([

diff --git a/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js b/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js
@@ -43,6 +43,12 @@ describe('ReactErrorLoggingRecovery', () => {
 
   beforeEach(() => {
     console.error = error => {
+      if (
+        error.includes('ReactDOM.render is no longer supported in React 18')
+      ) {
+        // Ignore legacy root deprecation warning
+        return;
+      }
       throw new Error('Buggy console.error');
     };
   });

diff --git a/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
@@ -668,16 +668,22 @@ describe('ReactLegacyErrorBoundaries', () => {
 
   it('logs a single error using both error boundaries', () => {
     const container = document.createElement('div');
-    expect(() =>
-      ReactDOM.render(
-        <BothErrorBoundaries>
-          <BrokenRender />
-        </BothErrorBoundaries>,
-        container,
-      ),
-    ).toErrorDev('The above error occurred in the <BrokenRender> component', {
-      logAllErrors: true,
-    });
+    spyOnDev(console, 'error');
+    ReactDOM.render(
+      <BothErrorBoundaries>
+        <BrokenRender />
+      </BothErrorBoundaries>,
+      container,
+    );
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.render is no longer supported',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toContain(
+        'The above error occurred in the <BrokenRender> component:',
+      );
+    }
 
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
     expect(log).toEqual([

diff --git a/packages/react-dom/src/__tests__/ReactLegacyRootWarnings-test.js b/packages/react-dom/src/__tests__/ReactLegacyRootWarnings-test.js
@@ -0,0 +1,38 @@
+let ReactDOM = require('react-dom');
+
+describe('ReactDOMRoot', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    ReactDOM = require('react-dom');
+  });
+
+  test('deprecation warning for ReactDOM.render', () => {
+    spyOnDev(console, 'error');
+
+    ReactDOM.render('Hi', container);
+    expect(container.textContent).toEqual('Hi');
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.render is no longer supported',
+      );
+    }
+  });
+
+  test('deprecation warning for ReactDOM.hydrate', () => {
+    spyOnDev(console, 'error');
+
+    container.innerHTML = 'Hi';
+    ReactDOM.hydrate('Hi', container);
+    expect(container.textContent).toEqual('Hi');
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.hydrate is no longer supported',
+      );
+    }
+  });
+});
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -219,6 +219,15 @@ export function hydrate(
   container: Container,
   callback: ?Function,
 ) {
+  if (__DEV__) {
+    console.error(
+      'ReactDOM.hydrate is no longer supported in React 18. Use createRoot ' +
+        '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',
+    );
+  }
+
   invariant(
     isValidContainer(container),
     'Target container is not a DOM element.',
@@ -250,6 +259,15 @@ export function render(
   container: Container,
   callback: ?Function,
 ) {
+  if (__DEV__) {
+    console.error(
+      'ReactDOM.render is no longer supported in React 18. Use createRoot ' +
+        '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',
+    );
+  }
+
   invariant(
     isValidContainer(container),
     'Target container is not a DOM element.',

diff --git a/scripts/jest/shouldIgnoreConsoleError.js b/scripts/jest/shouldIgnoreConsoleError.js
@@ -13,6 +13,16 @@ module.exports = function shouldIgnoreConsoleError(format, args) {
         // Ignore it too.
         return true;
       }
+      if (
+        format.indexOf('ReactDOM.render is no longer supported in React 18') !==
+          -1 ||
+        format.indexOf(
+          'ReactDOM.hydrate is no longer supported in React 18'
+        ) !== -1
+      ) {
+        // We haven't finished migrating our tests to use createRoot.
+        return true;
+      }
     }
   } else {
     if (