From 074783ae73c897d50ff7cebf4cdc49bf0bfb52f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Wed, 20 Sep 2023 15:43:36 +0200 Subject: [PATCH] Do not use legacy React functions --- benchmark/browser/index.js | 6 +++--- .../src/index.tsx | 7 ++++--- .../src/index.js | 7 ++++--- examples/material-ui-express-ssr/client.js | 2 +- examples/material-ui-preact/src/index.js | 7 ++++--- .../mui-utils/src/elementAcceptingRef.test.tsx | 3 +++ .../src/elementTypeAcceptingRef.test.tsx | 3 +++ packages/mui-utils/src/useIsFocusVisible.test.js | 9 +++++++-- test/regressions/index.js | 16 ++++++---------- test/utils/createMount.tsx | 2 ++ 10 files changed, 37 insertions(+), 25 deletions(-) diff --git a/benchmark/browser/index.js b/benchmark/browser/index.js index 225106d929a6af..50f9b600fd632a 100644 --- a/benchmark/browser/index.js +++ b/benchmark/browser/index.js @@ -1,5 +1,5 @@ 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'; @@ -7,6 +7,7 @@ import { logReactMetrics } from './utils'; 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( , - rootEl, ); diff --git a/examples/material-ui-cra-styled-components-ts/src/index.tsx b/examples/material-ui-cra-styled-components-ts/src/index.tsx index c95009af6b8b09..26a4e6b9dda593 100644 --- a/examples/material-ui-cra-styled-components-ts/src/index.tsx +++ b/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( {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} , - document.getElementById('root'), ); diff --git a/examples/material-ui-cra-styled-components/src/index.js b/examples/material-ui-cra-styled-components/src/index.js index 094f2c72d0d2b0..f2ec9a8a408d1a 100644 --- a/examples/material-ui-cra-styled-components/src/index.js +++ b/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( {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} , - document.getElementById('root'), ); // If you want your app to work offline and load faster, you can change diff --git a/examples/material-ui-express-ssr/client.js b/examples/material-ui-express-ssr/client.js index 85226caaea013e..37174456bb43fd 100644 --- a/examples/material-ui-express-ssr/client.js +++ b/examples/material-ui-express-ssr/client.js @@ -21,4 +21,4 @@ function Main() { ); } -ReactDOM.hydrate(
, document.querySelector('#root')); +ReactDOM.hydrateRoot(document.querySelector('#root'),
); diff --git a/examples/material-ui-preact/src/index.js b/examples/material-ui-preact/src/index.js index 2725deba39850e..f479c894bfb169 100644 --- a/examples/material-ui-preact/src/index.js +++ b/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( , - document.getElementById('root'), ); diff --git a/packages/mui-utils/src/elementAcceptingRef.test.tsx b/packages/mui-utils/src/elementAcceptingRef.test.tsx index 465721411cebfa..4fbdf45e95439b 100644 --- a/packages/mui-utils/src/elementAcceptingRef.test.tsx +++ b/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.cloneElement(element, { ref: React.createRef() })} @@ -43,6 +45,7 @@ describe('elementAcceptingRef', () => { }); afterEach(() => { + // eslint-disable-next-line react/no-deprecated ReactDOM.unmountComponentAtNode(rootNode); }); diff --git a/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx b/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx index a39ec1610fcbee..4bf9a1a01ac794 100644 --- a/packages/mui-utils/src/elementTypeAcceptingRef.test.tsx +++ b/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( }> @@ -47,6 +49,7 @@ describe('elementTypeAcceptingRef', () => { }); afterEach(() => { + // eslint-disable-next-line react/no-deprecated ReactDOM.unmountComponentAtNode(rootNode); }); diff --git a/packages/mui-utils/src/useIsFocusVisible.test.js b/packages/mui-utils/src/useIsFocusVisible.test.js index 52974ed1e1f941..9e281f264d7903 100644 --- a/packages/mui-utils/src/useIsFocusVisible.test.js +++ b/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); }); diff --git a/test/regressions/index.js b/test/regressions/index.js index 82e1997dae0e67..c7bce0aad7dffb 100644 --- a/test/regressions/index.js +++ b/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 }) { ); - 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 = ; -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); diff --git a/test/utils/createMount.tsx b/test/utils/createMount.tsx index 7e47dbb83a5750..406e8e65b793c5 100644 --- a/test/utils/createMount.tsx +++ b/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!); });