Align no-deprecated rule with React 18 deprecations

Author: sergei-startsev

docs/rules/no-deprecated.md

@@ -36,13 +36,24 @@ import React, { PropTypes } from 'react';
 componentWillMount() { }
 componentWillReceiveProps() { }
 componentWillUpdate() { }
+
+// React 18 deprecations
+import { render } from 'react-dom';
+ReactDOM.render(<div></div>, container);
+
+import { hydrate } from 'react-dom';
+ReactDOM.hydrate(<div></div>, container);
+
+import {unmountComponentAtNode} from 'react-dom';
+ReactDOM.unmountComponentAtNode(container);
+
+import { renderToNodeStream } from 'react-dom/server';
+ReactDOMServer.renderToNodeStream(element);
 ```
 
 Examples of **correct** code for this rule:
 
 ```jsx
-ReactDOM.render(<MyComponent />, root);
-
 // When [1, {"react": "0.13.0"}]
 ReactDOM.findDOMNode(this.refs.foo);
 
@@ -51,4 +62,13 @@ import { PropTypes } from 'prop-types';
 UNSAFE_componentWillMount() { }
 UNSAFE_componentWillReceiveProps() { }
 UNSAFE_componentWillUpdate() { }
+
+ReactDOM.createPortal(child, container);
+
+import { createRoot } from 'react-dom/client';
+const root = createRoot(container);
+root.unmount();
+
+import { hydrateRoot } from 'react-dom/client';
+const root = hydrateRoot(container, <App/>);
 ```

lib/rules/no-deprecated.js

@@ -22,6 +22,8 @@ const report = require('../util/report');
 const MODULES = {
   react: ['React'],
   'react-addons-perf': ['ReactPerf', 'Perf'],
+  'react-dom': ['ReactDOM'],
+  'react-dom/server': ['ReactDOMServer'],
 };
 
 // ------------------------------------------------------------------------------
@@ -82,6 +84,29 @@ function getDeprecated(pragma) {
     'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. '
     + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.',
   ];
+  // 18.0.0
+  // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#deprecations
+  deprecated['ReactDOM.render'] = [
+    '18.0.0',
+    'createRoot',
+    'https://reactjs.org/link/switch-to-createroot',
+  ];
+  deprecated['ReactDOM.hydrate'] = [
+    '18.0.0',
+    'hydrateRoot',
+    'https://reactjs.org/link/switch-to-createroot',
+  ];
+  deprecated['ReactDOM.unmountComponentAtNode'] = [
+    '18.0.0',
+    'root.unmount',
+    'https://reactjs.org/link/switch-to-createroot',
+  ];
+  deprecated['ReactDOMServer.renderToNodeStream'] = [
+    '18.0.0',
+    'renderToPipeableStream',
+    'https://reactjs.org/docs/react-dom-server.html#rendertonodestream',
+  ];
+
   return deprecated;
 }
 

tests/lib/rules/no-deprecated.js

@@ -48,9 +48,9 @@ ruleTester.run('no-deprecated', rule, {
     // Not deprecated
     'var element = React.createElement(\'p\', {}, null);',
     'var clone = React.cloneElement(element);',
-    'ReactDOM.render(element, container);',
-    'ReactDOM.unmountComponentAtNode(container);',
+    'ReactDOM.cloneElement(child, container);',
     'ReactDOM.findDOMNode(instance);',
+    'ReactDOM.createPortal(child, container);',
     'ReactDOMServer.renderToString(element);',
     'ReactDOMServer.renderToStaticMarkup(element);',
     {
@@ -119,6 +119,29 @@ ruleTester.run('no-deprecated', rule, {
         let { default: defaultReactExport, ...allReactExports } = React;
       `,
     },
+    // React 18 API
+    {
+      code: `
+        import ReactDOM, { createRoot } from 'react-dom/client';
+        ReactDOM.createRoot(container);
+        const root = createRoot(container);
+        root.unmount();
+      `,
+    },
+    {
+      code: `
+        import ReactDOM, { hydrateRoot } from 'react-dom/client';
+        ReactDOM.hydrateRoot(container, <App/>);
+        hydrateRoot(container, <App/>);
+      `,
+    },
+    {
+      code: `
+        import ReactDOMServer, { renderToPipeableStream } from 'react-dom/server';
+        ReactDOMServer.renderToPipeableStream(<App />, {});
+        renderToPipeableStream(<App />, {});
+      `,
+    },
   ]),
 
   invalid: parsers.all([
@@ -454,5 +477,93 @@ ruleTester.run('no-deprecated', rule, {
         ),
       ],
     },
+    {
+      code: `
+        import { render } from 'react-dom';
+        ReactDOM.render(<div></div>, container);
+      `,
+      errors: [
+        errorMessage(
+          'ReactDOM.render',
+          '18.0.0',
+          'createRoot',
+          'https://reactjs.org/link/switch-to-createroot',
+          { type: 'ImportDeclaration', line: 2, column: 9 }
+        ),
+        errorMessage(
+          'ReactDOM.render',
+          '18.0.0',
+          'createRoot',
+          'https://reactjs.org/link/switch-to-createroot',
+          { type: 'MemberExpression', line: 3, column: 9 }
+        ),
+      ],
+    },
+    {
+      code: `
+        import { hydrate } from 'react-dom';
+        ReactDOM.hydrate(<div></div>, container);
+      `,
+      errors: [
+        errorMessage(
+          'ReactDOM.hydrate',
+          '18.0.0',
+          'hydrateRoot',
+          'https://reactjs.org/link/switch-to-createroot',
+          { type: 'ImportDeclaration', line: 2, column: 9 }
+        ),
+        errorMessage(
+          'ReactDOM.hydrate',
+          '18.0.0',
+          'hydrateRoot',
+          'https://reactjs.org/link/switch-to-createroot',
+          { type: 'MemberExpression', line: 3, column: 9 }
+        ),
+      ],
+    },
+    {
+      code: `
+        import { unmountComponentAtNode } from 'react-dom';
+        ReactDOM.unmountComponentAtNode(container);
+      `,
+      errors: [
+        errorMessage(
+          'ReactDOM.unmountComponentAtNode',
+          '18.0.0',
+          'root.unmount',
+          'https://reactjs.org/link/switch-to-createroot',
+          { type: 'ImportDeclaration', line: 2, column: 9 }
+        ),
+        errorMessage(
+          'ReactDOM.unmountComponentAtNode',
+          '18.0.0',
+          'root.unmount',
+          'https://reactjs.org/link/switch-to-createroot',
+          { type: 'MemberExpression', line: 3, column: 9 }
+        ),
+      ],
+    },
+    {
+      code: `
+        import { renderToNodeStream } from 'react-dom/server';
+        ReactDOMServer.renderToNodeStream(element);
+      `,
+      errors: [
+        errorMessage(
+          'ReactDOMServer.renderToNodeStream',
+          '18.0.0',
+          'renderToPipeableStream',
+          'https://reactjs.org/docs/react-dom-server.html#rendertonodestream',
+          { type: 'ImportDeclaration', line: 2, column: 9 }
+        ),
+        errorMessage(
+          'ReactDOMServer.renderToNodeStream',
+          '18.0.0',
+          'renderToPipeableStream',
+          'https://reactjs.org/docs/react-dom-server.html#rendertonodestream',
+          { type: 'MemberExpression', line: 3, column: 9 }
+        ),
+      ],
+    },
   ]),
 });