[RootRef] Deprecate component

docs/pages/api-docs/root-ref.md

@@ -49,6 +49,8 @@ function MyComponent() {
 }
 ```
 
+@deprecated
+
 
 
 ## Props

packages/material-ui/src/RootRef/RootRef.d.ts

@@ -36,6 +36,8 @@ export interface RootRefProps<T = any> {
  *   );
  * }
  * ```
+ *
+ * @deprecated
  * API:
  *
  * - [RootRef API](https://material-ui.com/api/root-ref/)

packages/material-ui/src/RootRef/RootRef.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import { exactProp, refType } from '@material-ui/utils';
 import setRef from '../utils/setRef';
 
+let warnedOnce = false;
+
 /**
  * ⚠️⚠️⚠️
  * If you want the DOM element of a Material-UI component check out
@@ -35,6 +37,8 @@ import setRef from '../utils/setRef';
  *   );
  * }
  * ```
+ *
+ * @deprecated
  */
 class RootRef extends React.Component {
   componentDidMount() {
@@ -61,6 +65,19 @@ class RootRef extends React.Component {
   }
 
   render() {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.warn(
+          [
+            'Material-UI: The RootRef component is deprecated.',
+            'The component relies on the ReactDOM.findDOMNode API which is deprecated in React.StrictMode.',
+            'Instead, you can get a reference to the underlying DOM node of the components via the `ref` prop.',
+          ].join('/n'),
+        );
+      }
+    }
+
     return this.props.children;
   }
 }

packages/material-ui/src/RootRef/RootRef.test.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { spy } from 'sinon';
+import { consoleWarnMock } from 'test/utils/consoleErrorMock';
 import createMount from 'test/utils/createMount';
 import RootRef from './RootRef';
 
@@ -11,6 +12,14 @@ describe('<RootRef />', () => {
   // StrictModeViolation: uses findDOMNode
   const mount = createMount({ strict: false });
 
+  beforeEach(() => {
+    consoleWarnMock.spy();
+  });
+
+  afterEach(() => {
+    consoleWarnMock.reset();
+  });
+
   it('call rootRef function on mount and unmount', () => {
     const rootRef = spy();
     const wrapper = mount(