Do not use legacy React functions

Author: michaldudak

benchmark/browser/index.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import PropTypes from 'prop-types';
 import { logReactMetrics } from './utils';
 
 // Get all the scenarios
 const requirePerfScenarios = require.context('./scenarios', true, /(js|ts|tsx)$/);
 
 const rootEl = document.getElementById('root');
+const root = ReactDOMClient.createRoot(rootEl);
 
 const scenarioSuitePath = window.location.search.replace('?', '');
 
@@ -35,11 +36,10 @@ Measure.propTypes = {
   children: PropTypes.node,
 };
 
-ReactDOM.render(
+root.render(
   <React.Profiler id={scenarioSuitePath} onRender={logReactMetrics}>
     <Measure>
       <Component />
     </Measure>
   </React.Profiler>,
-  rootEl,
 );

examples/material-ui-cra-styled-components-ts/src/index.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import App from './App';
 
-ReactDOM.render(
+const root = ReactDOMClient.createRoot(document.getElementById('root')!);
+
+root.render(
   <React.Fragment>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
     <CssBaseline />
     <App />
   </React.Fragment>,
-  document.getElementById('root'),
 );

examples/material-ui-cra-styled-components/src/index.js

@@ -1,16 +1,17 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import CssBaseline from '@mui/material/CssBaseline';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(
+const root = ReactDOMClient.createRoot(document.getElementById('root'));
+
+root.render(
   <React.Fragment>
     {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
     <CssBaseline />
     <App />
   </React.Fragment>,
-  document.getElementById('root'),
 );
 
 // If you want your app to work offline and load faster, you can change

examples/material-ui-express-ssr/client.js

@@ -21,4 +21,4 @@ function Main() {
   );
 }
 
-ReactDOM.hydrate(<Main />, document.querySelector('#root'));
+ReactDOM.hydrateRoot(document.querySelector('#root'), <Main />);

examples/material-ui-preact/src/index.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
+const root = ReactDOMClient.createRoot(document.getElementById('root'));
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 );

packages/mui-utils/src/elementAcceptingRef.test.tsx

@@ -26,6 +26,8 @@ describe('elementAcceptingRef', () => {
       function testAct() {
         checkPropType(element);
         if (shouldMount) {
+          // TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed.
+          // eslint-disable-next-line react/no-deprecated
           ReactDOM.render(
             <React.Suspense fallback={<p />}>
               {React.cloneElement(element, { ref: React.createRef() })}
@@ -43,6 +45,7 @@ describe('elementAcceptingRef', () => {
     });
 
     afterEach(() => {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(rootNode);
     });
 

packages/mui-utils/src/elementTypeAcceptingRef.test.tsx

@@ -26,6 +26,8 @@ describe('elementTypeAcceptingRef', () => {
       function testAct() {
         checkPropType(Component);
         if (shouldMount) {
+          // TODO: replace with React 18 implementation after https://github.com/testing-library/react-testing-library/issues/1216 is closed.
+          // eslint-disable-next-line react/no-deprecated
           ReactDOM.render(
             <React.Suspense fallback={<p />}>
               <Component ref={React.createRef()} />
@@ -47,6 +49,7 @@ describe('elementTypeAcceptingRef', () => {
     });
 
     afterEach(() => {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(rootNode);
     });
 

packages/mui-utils/src/useIsFocusVisible.test.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import {
   act,
   createRenderer,
@@ -67,15 +67,20 @@ describe('useIsFocusVisible', () => {
     });
 
     let rootElement;
+    let reactRoot;
 
     beforeEach(() => {
       rootElement = document.createElement('div');
       document.body.appendChild(rootElement);
       rootElement.attachShadow({ mode: 'open' });
+      reactRoot = ReactDOMClient.createRoot(rootElement.shadowRoot);
     });
 
     afterEach(() => {
-      ReactDOM.unmountComponentAtNode(rootElement.shadowRoot);
+      act(() => {
+        reactRoot.unmount();
+      });
+
       teardownFocusVisible(rootElement.shadowRoot);
       document.body.removeChild(rootElement);
     });

test/regressions/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import webfontloader from 'webfontloader';
 import TestViewer from './TestViewer';
@@ -222,7 +222,7 @@ if (unusedBlacklistPatterns.size > 0) {
   );
 }
 
-const viewerRoot = document.getElementById('test-viewer');
+const viewerRoot = ReactDOMClient.createRoot(document.getElementById('test-viewer'));
 
 function FixtureRenderer({ component: FixtureComponent }) {
   React.useLayoutEffect(() => {
@@ -232,12 +232,12 @@ function FixtureRenderer({ component: FixtureComponent }) {
       </TestViewer>
     );
 
-    ReactDOM.render(children, viewerRoot);
+    viewerRoot.render(children);
   }, [FixtureComponent]);
 
   React.useLayoutEffect(() => {
     return () => {
-      ReactDOM.unmountComponentAtNode(viewerRoot);
+      viewerRoot.unmount();
     };
   }, []);
 
@@ -354,9 +354,5 @@ App.propTypes = {
 
 const container = document.getElementById('react-root');
 const children = <App fixtures={regressionFixtures.concat(demoFixtures)} />;
-if (typeof ReactDOM.unstable_createRoot === 'function') {
-  const root = ReactDOM.unstable_createRoot(container);
-  root.render(children);
-} else {
-  ReactDOM.render(children, container);
-}
+const reactRoot = ReactDOMClient.createRoot(container);
+reactRoot.render(children);

test/utils/createMount.tsx

@@ -85,6 +85,7 @@ export default function createMount(options: CreateMountOptions = {}) {
 
   afterEach(() => {
     ReactDOMTestUtils.act(() => {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(container!);
     });
     container!.parentElement!.removeChild(container!);
@@ -103,6 +104,7 @@ export default function createMount(options: CreateMountOptions = {}) {
       );
     }
     ReactDOMTestUtils.act(() => {
+      // eslint-disable-next-line react/no-deprecated
       ReactDOM.unmountComponentAtNode(container!);
     });