From fd4da58a93976f4f466f5dc31724600c7e6bab43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 1 Mar 2022 00:13:28 -0500
Subject: [PATCH] Move createRoot/hydrateRoot to react-dom/client (#23385)

* Move createRoot/hydrateRoot to /client

We want these APIs ideally to be imported separately from things you
might use in arbitrary components (like flushSync). Those other methods
are "isomorphic" to how the ReactDOM tree is rendered. Similar to hooks.

E.g. importing flushSync into a component that only uses it on the client
should ideally not also pull in the entry client implementation on the
server.

This also creates a nicer parity with /server where the roots are in a
separate entry point.

Unfortunately, I can't quite do this yet because we have some legacy APIs
that we plan on removing (like findDOMNode) and we also haven't implemented
flushSync using a flag like startTransition does yet.

Another problem is that we currently encourage these APIs to be aliased by
/profiling (or unstable_testing). In the future you don't have to alias
them because you can just change your roots to just import those APIs and
they'll still work with the isomorphic forms. Although we might also just
use export conditions for them.

For that all to work, I went with a different strategy for now where the
real API is in / but it comes with a warning if you use it. If you instead
import /client it disables the warning in a wrapper. That means that if you
alias / then import /client that will inturn import the alias and it'll
just work.

In a future breaking changes (likely when we switch to ESM) we can just
remove createRoot/hydrateRoot from / and move away from the aliasing
strategy.

* Update tests to import from react-dom/client

* Fix fixtures

* Update warnings

* Add test for the warning

* Update devtools

* Change order of react-dom, react-dom/client alias

I think the order matters here. The first one takes precedence.

* Require react-dom through client so it can be aliased

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 fixtures/blocks/src/index.js                  |   2 +-
 fixtures/concurrent/time-slicing/src/index.js |   2 +-
 fixtures/ssr/src/index.js                     |   2 +-
 fixtures/ssr/yarn.lock                        |  10 +-
 fixtures/ssr2/src/index.js                    |   2 +-
 .../react-devtools-core/src/standalone.js     |   5 +-
 .../react-devtools-core/webpack.standalone.js |   1 +
 .../webpack.config.js                         |   1 +
 packages/react-devtools-inline/README.md      |   8 +-
 .../react-devtools-inline/webpack.config.js   |   1 +
 .../src/__tests__/TimelineProfiler-test.js    |   6 +-
 .../src/__tests__/console-test.js             |  18 +--
 .../src/__tests__/inspectedElement-test.js    |  14 +-
 .../src/__tests__/preprocessData-test.js      |  49 +++++--
 .../src/__tests__/profilingCache-test.js      |   8 +-
 .../profilingCommitTreeBuilder-test.js        |   8 +-
 .../src/__tests__/profilingHostRoot-test.js   |   8 +-
 .../src/__tests__/store-test.js               |  16 ++-
 .../storeStressTestConcurrent-test.js         |  44 +++----
 .../react-devtools-shell/src/app/index.js     |   8 +-
 packages/react-devtools-shell/src/e2e/app.js  |   4 +-
 .../react-devtools-shell/src/e2e/devtools.js  |   3 +-
 .../react-devtools-shell/webpack.config.js    |   1 +
 packages/react-dom/client.js                  |  57 +++++++++
 packages/react-dom/npm/client.js              |  25 ++++
 packages/react-dom/package.json               |   2 +
 .../ReactDOMConsoleErrorReporting-test.js     |  18 +--
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  24 ++--
 .../src/__tests__/ReactDOMFizzServer-test.js  |  41 +++---
 .../ReactDOMFizzShellHydration-test.js        |  10 +-
 .../src/__tests__/ReactDOMHooks-test.js       |   4 +-
 .../ReactDOMImageLoad-test.internal.js        |  18 +--
 .../ReactDOMNativeEventHeuristic-test.js      |  18 +--
 .../__tests__/ReactDOMNestedEvents-test.js    |   6 +-
 .../src/__tests__/ReactDOMRoot-test.js        |  92 +++++++++-----
 .../ReactDOMSafariMicrotaskBug-test.js        |   6 +-
 ...DOMServerPartialHydration-test.internal.js | 120 ++++++++++--------
 ...MServerSelectiveHydration-test.internal.js |  44 ++++---
 .../ReactDOMServerSuspense-test.internal.js   |   4 +-
 .../src/__tests__/ReactDOMUseId-test.js       |  26 ++--
 .../ReactServerRenderingHydration-test.js     |   4 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |   6 +-
 .../src/__tests__/ReactUpdates-test.js        |   6 +-
 packages/react-dom/src/client/ReactDOM.js     |  43 ++++++-
 .../react-dom/src/client/ReactDOMLegacy.js    |   6 +-
 packages/react-dom/src/client/ReactDOMRoot.js |   6 +-
 .../DOMPluginEventSystem-test.internal.js     |  16 ++-
 .../__tests__/ChangeEventPlugin-test.js       |  14 +-
 .../__tests__/SimpleEventPlugin-test.js       |   7 +-
 .../__tests__/useFocusWithin-test.internal.js |   6 +-
 .../src/ReactFiberBeginWork.new.js            |   2 +-
 .../src/ReactFiberBeginWork.old.js            |   2 +-
 .../src/ReactFiberDevToolsHook.new.js         |   6 +-
 .../src/ReactFiberDevToolsHook.old.js         |   6 +-
 .../src/__tests__/ReactScope-test.internal.js |   4 +-
 .../ReactSuspenseEffectsSemanticsDOM-test.js  |   6 +-
 .../__tests__/ReactUpdaters-test.internal.js  |   8 +-
 .../useMutableSourceHydration-test.js         |  16 +--
 .../src/__tests__/ReactFresh-test.js          |   4 +-
 .../ReactFlightDOMRelay-test.internal.js      |   6 +-
 .../src/__tests__/ReactFlightDOM-test.js      |  14 +-
 .../__tests__/ReactFlightDOMBrowser-test.js   |   6 +-
 .../ReactCoffeeScriptClass-test.coffee        |   4 +-
 .../react/src/__tests__/ReactES6Class-test.js |   4 +-
 .../ReactStrictMode-test.internal.js          |  12 +-
 .../src/__tests__/ReactStrictMode-test.js     |  13 +-
 .../__tests__/ReactTypeScriptClass-test.ts    |   4 +-
 .../__tests__/testDefinitions/ReactDOM.d.ts   |   1 -
 .../testDefinitions/ReactDOMClient.d.ts       |  18 +++
 .../useSyncExternalStoreShared-test.js        |   6 +-
 scripts/jest/typescript/preprocessor.js       |   2 +-
 scripts/shared/inlinedHostConfigs.js          |  10 ++
 72 files changed, 648 insertions(+), 356 deletions(-)
 create mode 100644 packages/react-dom/client.js
 create mode 100644 packages/react-dom/npm/client.js
 create mode 100644 packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts

diff --git a/fixtures/blocks/src/index.js b/fixtures/blocks/src/index.js
index be279937f4d3f..5a833ff3f1128 100644
--- a/fixtures/blocks/src/index.js
+++ b/fixtures/blocks/src/index.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import './index.css';
 import Router from './Router';
 
diff --git a/fixtures/concurrent/time-slicing/src/index.js b/fixtures/concurrent/time-slicing/src/index.js
index c871ec6c11227..2b99f803f55c5 100644
--- a/fixtures/concurrent/time-slicing/src/index.js
+++ b/fixtures/concurrent/time-slicing/src/index.js
@@ -1,5 +1,5 @@
 import React, {PureComponent, unstable_startTransition} from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import _ from 'lodash';
 import Charts from './Charts';
 import Clock from './Clock';
diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index 8bef3639ae754..37cc25cb71671 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {hydrateRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom/client';
 
 import App from './components/App';
 
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index d3a688915784d..3609381253bce 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -4265,7 +4265,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5945,6 +5945,14 @@ sax@^1.2.1, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.20.1:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
diff --git a/fixtures/ssr2/src/index.js b/fixtures/ssr2/src/index.js
index adf035ad1a881..10c2898e328b7 100644
--- a/fixtures/ssr2/src/index.js
+++ b/fixtures/ssr2/src/index.js
@@ -6,7 +6,7 @@
  *
  */
 
-import {hydrateRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom/client';
 import App from './App';
 
 hydrateRoot(document, <App assets={window.assetManifest} />);
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index ab3250d7cff7a..c04cad1ddea08 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -11,9 +11,8 @@ import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about flushSync()
   flushSync,
-  // $FlowFixMe Flow does not yet know about createRoot()
-  createRoot,
-} from 'react-dom';
+} from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 234d638353f43..b7732d6641690 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -64,6 +64,7 @@ module.exports = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index ac7c51f3bdc5e..3a913e0373804 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -76,6 +76,7 @@ module.exports = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index fe071633528c6..53edee429bd02 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -60,7 +60,7 @@ const contentWindow = iframe.contentWindow;
 const DevTools = initialize(contentWindow);
 ```
 
-<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.createRoot` or `ReactDOM.createSyncRoot`. **It should not be rendered with `ReactDOM.render`.**
+<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using `ReactDOMClient.createRoot`. **It should not be rendered with `ReactDOM.render`.**
 
 ## Examples
 
@@ -110,8 +110,7 @@ const DevTools = initializeFrontend(contentWindow);
 // as setting the src of the <iframe> would load a new page (without the injected backend).
 
 // <DevTools /> interface can be rendered in the parent window at any time now...
-// Be sure to use either ReactDOM.createRoot()
-// or ReactDOM.createSyncRoot() to render this component.
+// Be sure to use ReactDOMClient.createRoot() to render this component.
 
 // Let the backend know the frontend is ready and listening.
 activateBackend(contentWindow);
@@ -154,8 +153,7 @@ const { contentWindow } = iframe;
 
 // Initialize DevTools UI to listen to the iframe.
 // This returns a React component we can render anywhere in the main window.
-// Be sure to use either ReactDOM.createRoot()
-// or ReactDOM.createSyncRoot() to render this component.
+// Be sure to use ReactDOMClient.createRoot() to render this component.
 const DevTools = initialize(contentWindow);
 
 // Let the backend know to initialize itself.
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index c53a61b61d415..910204b6d81ef 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -51,6 +51,7 @@ module.exports = {
   externals: {
     react: 'react',
     'react-dom': 'react-dom',
+    'react-dom/client': 'react-dom/client',
     'react-is': 'react-is',
     scheduler: 'scheduler',
   },
diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
index f010261a616e6..859be719c2ad2 100644
--- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -11,7 +11,7 @@
 
 describe('Timeline profiler', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let renderHelper;
   let renderRootHelper;
@@ -31,7 +31,7 @@ describe('Timeline profiler', () => {
     };
     renderRootHelper = element => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(element);
       const unmountFn = () => root.unmount();
       unmountFns.push(unmountFn);
@@ -39,7 +39,7 @@ describe('Timeline profiler', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     store = global.store;
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 1129c153267cb..9d69e6c705579 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -7,7 +7,7 @@
  * @flow
  */
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let act;
 let fakeConsole;
 let legacyRender;
@@ -53,7 +53,7 @@ describe('console', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -476,7 +476,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -515,7 +515,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -557,7 +557,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -605,7 +605,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -639,7 +639,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
@@ -719,7 +719,7 @@ describe('console error', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -728,7 +728,7 @@ describe('console error', () => {
 
   it('error in console log throws without interfering with logging', () => {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 7c67a4084ae34..b09a54888657c 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -16,6 +16,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('InspectedElement', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let PropTypes;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
@@ -52,6 +53,7 @@ describe('InspectedElement', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     PropTypes = require('prop-types');
     TestUtilsAct = require('jest-react').act;
     TestRenderer = utils.requireTestRenderer();
@@ -506,7 +508,7 @@ describe('InspectedElement', () => {
     });
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await utils.actAsync(() => root.render(<Target a={1} b="abc" />));
 
     expect(targetRenderCount).toBe(1);
@@ -2091,25 +2093,25 @@ describe('InspectedElement', () => {
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
   });
 
-  it('should display the root type for ReactDOM.hydrateRoot', async () => {
+  it('should display the root type for ReactDOMClient.hydrateRoot', async () => {
     const Example = () => <div />;
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
       container.innerHTML = '<div></div>';
-      ReactDOM.hydrateRoot(container).render(<Example />);
+      ReactDOMClient.hydrateRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
   });
 
-  it('should display the root type for ReactDOM.createRoot', async () => {
+  it('should display the root type for ReactDOMClient.createRoot', async () => {
     const Example = () => <div />;
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -2133,7 +2135,7 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     shouldThrow = true;
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index 0d5ebff509b90..72086a684cd41 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -12,6 +12,7 @@
 describe('Timeline profiler', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let utils;
 
@@ -76,6 +77,7 @@ describe('Timeline profiler', () => {
 
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
 
       setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
@@ -797,7 +799,7 @@ describe('Timeline profiler', () => {
           return true;
         }
 
-        const root = ReactDOM.createRoot(document.createElement('div'));
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
         utils.act(() => root.render(<App />));
 
         const data = await preprocessData([
@@ -1222,7 +1224,7 @@ describe('Timeline profiler', () => {
 
         const testMarks = [creactCpuProfilerSample()];
 
-        const root = ReactDOM.createRoot(document.createElement('div'));
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
         utils.act(() =>
           root.render(
             <React.Suspense fallback="Loading...">
@@ -1342,7 +1344,9 @@ describe('Timeline profiler', () => {
             // Advance the clock by some arbitrary amount.
             startTime += 50000;
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
 
             // Temporarily turn off the act environment, since we're intentionally using Scheduler instead.
             global.IS_REACT_ACT_ENVIRONMENT = false;
@@ -1398,7 +1402,9 @@ describe('Timeline profiler', () => {
               return didMount;
             }
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1434,7 +1440,9 @@ describe('Timeline profiler', () => {
               }
             }
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1471,7 +1479,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1530,7 +1540,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1599,7 +1611,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1664,7 +1678,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1730,7 +1746,9 @@ describe('Timeline profiler', () => {
             const testMarks = [creactCpuProfilerSample()];
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <ErrorBoundary>
@@ -1775,7 +1793,9 @@ describe('Timeline profiler', () => {
             }
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <React.Suspense fallback="Loading...">
@@ -1830,7 +1850,9 @@ describe('Timeline profiler', () => {
             }
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <React.Suspense fallback="Loading...">
@@ -1881,6 +1903,7 @@ describe('Timeline profiler', () => {
 
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
 
       store = global.store;
@@ -2071,7 +2094,7 @@ describe('Timeline profiler', () => {
         return true;
       }
 
-      const root = ReactDOM.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
       utils.act(() => root.render(<App />));
       utils.act(() => store.profilerStore.stopProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 67db757461a6d..f41e39a35d695 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -15,6 +15,7 @@ describe('ProfilingCache', () => {
   let PropTypes;
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
@@ -36,6 +37,7 @@ describe('ProfilingCache', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     TestRenderer = utils.requireTestRenderer();
   });
@@ -771,7 +773,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
@@ -805,7 +807,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
@@ -834,7 +836,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index 9923fb33aa82e..f218af7730ec6 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -12,7 +12,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('commit tree', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let TestRenderer: TestRendererType;
   let legacyRender;
@@ -30,7 +30,7 @@ describe('commit tree', () => {
     store.recordChangeDescriptions = true;
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     TestRenderer = utils.requireTestRenderer();
   });
@@ -146,7 +146,7 @@ describe('commit tree', () => {
 
     it('should support Lazy components (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
@@ -219,7 +219,7 @@ describe('commit tree', () => {
 
     it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
diff --git a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
index 61dc9f6bfd635..9f26e7391d61b 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -9,7 +9,7 @@
 
 describe('profiling HostRoot', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let legacyRender;
   let store: Store;
@@ -29,7 +29,7 @@ describe('profiling HostRoot', () => {
     store = global.store;
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     effectDurations = [];
@@ -91,7 +91,7 @@ describe('profiling HostRoot', () => {
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<App />);
     });
     utils.act(() => store.profilerStore.stopProfiling());
@@ -124,7 +124,7 @@ describe('profiling HostRoot', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => root.render(<App />));
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index ee7c65a156827..c7b8d7aab7962 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -10,6 +10,7 @@
 describe('Store', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let agent;
   let act;
   let bridge;
@@ -25,6 +26,7 @@ describe('Store', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -120,7 +122,9 @@ describe('Store', () => {
       const Component = () => null;
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container, {unstable_strictMode: true});
+      const root = ReactDOMClient.createRoot(container, {
+        unstable_strictMode: true,
+      });
       act(() => {
         root.render(<App />);
       });
@@ -134,7 +138,7 @@ describe('Store', () => {
       const Component = () => null;
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<App />);
       });
@@ -152,7 +156,7 @@ describe('Store', () => {
       const Component = () => null;
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<App />);
       });
@@ -466,7 +470,7 @@ describe('Store', () => {
       );
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<Wrapper shouldSuspense={true} />);
       });
@@ -1070,7 +1074,7 @@ describe('Store', () => {
 
     it('should support Lazy components in (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
@@ -1106,7 +1110,7 @@ describe('Store', () => {
 
     it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index d8f6d67a2ad79..af1541f841ebe 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -9,7 +9,7 @@
 
 describe('StoreStressConcurrent', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let act;
   let actAsync;
   let bridge;
@@ -22,7 +22,7 @@ describe('StoreStressConcurrent', () => {
     store.collapseNodesByDefault = false;
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('./utils').act;
     // TODO: Figure out recommendation for concurrent mode tests, then replace
     // this helper with the real thing.
@@ -67,7 +67,7 @@ describe('StoreStressConcurrent', () => {
     // 1. Render a normal version of [a, b, c, d, e].
     let container = document.createElement('div');
     // $FlowFixMe
-    let root = ReactDOM.createRoot(container);
+    let root = ReactDOMClient.createRoot(container);
     act(() => root.render(<Parent>{[a, b, c, d, e]}</Parent>));
     expect(store).toMatchInlineSnapshot(
       `
@@ -151,7 +151,7 @@ describe('StoreStressConcurrent', () => {
       // Ensure fresh mount.
       container = document.createElement('div');
       // $FlowFixMe
-      root = ReactDOM.createRoot(container);
+      root = ReactDOMClient.createRoot(container);
 
       // Verify mounting 'abcde'.
       act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -181,7 +181,7 @@ describe('StoreStressConcurrent', () => {
     // There'll be no unmounting until the very end.
     container = document.createElement('div');
     // $FlowFixMe
-    root = ReactDOM.createRoot(container);
+    root = ReactDOMClient.createRoot(container);
     for (let i = 0; i < cases.length; i++) {
       // Verify mounting 'abcde'.
       act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -248,7 +248,7 @@ describe('StoreStressConcurrent', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => root.render(<Root>{steps[i]}</Root>));
       // We snapshot each step once so it doesn't regress.
       snapshots.push(print(store));
@@ -320,7 +320,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() => root.render(<Root>{steps[i]}</Root>));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => root.render(<Root>{steps[j]}</Root>));
@@ -337,7 +337,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -410,7 +410,7 @@ describe('StoreStressConcurrent', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -513,7 +513,7 @@ describe('StoreStressConcurrent', () => {
     // 2. Verify check Suspense can render same steps as initial fallback content.
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -538,7 +538,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -584,7 +584,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -642,7 +642,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -692,7 +692,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -746,7 +746,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -901,7 +901,7 @@ describe('StoreStressConcurrent', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -925,7 +925,7 @@ describe('StoreStressConcurrent', () => {
     const fallbackSnapshots = [];
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -1059,7 +1059,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1111,7 +1111,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1178,7 +1178,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1230,7 +1230,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1282,7 +1282,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index f949b8598f48a..b00ea8ad6e90d 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -3,12 +3,8 @@
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
 import {createElement} from 'react';
-import {
-  // $FlowFixMe Flow does not yet know about createRoot()
-  createRoot,
-  render,
-  unmountComponentAtNode,
-} from 'react-dom';
+import {createRoot} from 'react-dom/client';
+import {render, unmountComponentAtNode} from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import Iframe from './Iframe';
 import EditableProps from './EditableProps';
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
index a3885e9331361..71f33f9044873 100644
--- a/packages/react-devtools-shell/src/e2e/app.js
+++ b/packages/react-devtools-shell/src/e2e/app.js
@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 
 const container = document.createElement('div');
 
@@ -13,8 +14,7 @@ const container = document.createElement('div');
 // so that it can load things other than just ToDoList.
 const App = require('./apps/ListApp').default;
 
-// $FlowFixMe Flow doesn't know about createRoot() yet.
-const root = ReactDOM.createRoot(container);
+const root = ReactDOMClient.createRoot(container);
 root.render(<App />);
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
index 5665be4c5f130..059d330e83c95 100644
--- a/packages/react-devtools-shell/src/e2e/devtools.js
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
@@ -33,7 +34,7 @@ function init(appIframe, devtoolsContainer, appSource) {
 
   inject(contentDocument, appSource, () => {
     // $FlowFixMe Flow doesn't know about createRoot() yet.
-    ReactDOM.createRoot(devtoolsContainer).render(
+    ReactDOMClient.createRoot(devtoolsContainer).render(
       <DevTools
         hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
         showTabBar={true}
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 496bdabd6b761..498b4387c6032 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -60,6 +60,7 @@ const config = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags('shell'),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
       'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
diff --git a/packages/react-dom/client.js b/packages/react-dom/client.js
new file mode 100644
index 0000000000000..694b75eb1e5f3
--- /dev/null
+++ b/packages/react-dom/client.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+import type {Container} from './src/client/ReactDOMHostConfig';
+import type {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  RootType,
+  HydrateRootOptions,
+  CreateRootOptions,
+} from './src/client/ReactDOMRoot';
+
+import {
+  createRoot as createRootImpl,
+  hydrateRoot as hydrateRootImpl,
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as Internals,
+} from './';
+
+export function createRoot(
+  container: Container,
+  options?: CreateRootOptions,
+): RootType {
+  if (__DEV__) {
+    Internals.usingClientEntryPoint = true;
+  }
+  try {
+    return createRootImpl(container, options);
+  } finally {
+    if (__DEV__) {
+      Internals.usingClientEntryPoint = false;
+    }
+  }
+}
+
+export function hydrateRoot(
+  container: Container,
+  children: ReactNodeList,
+  options?: HydrateRootOptions,
+): RootType {
+  if (__DEV__) {
+    Internals.usingClientEntryPoint = true;
+  }
+  try {
+    return hydrateRootImpl(container, children, options);
+  } finally {
+    if (__DEV__) {
+      Internals.usingClientEntryPoint = false;
+    }
+  }
+}
diff --git a/packages/react-dom/npm/client.js b/packages/react-dom/npm/client.js
new file mode 100644
index 0000000000000..8e611088d0a34
--- /dev/null
+++ b/packages/react-dom/npm/client.js
@@ -0,0 +1,25 @@
+'use strict';
+
+var m = require('react-dom');
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = m.createRoot;
+  exports.hydrateRoot = m.hydrateRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 25207ffc9c39f..655b9947fa503 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -27,6 +27,7 @@
     "LICENSE",
     "README.md",
     "index.js",
+    "client.js",
     "profiling.js",
     "server.js",
     "server.browser.js",
@@ -38,6 +39,7 @@
   ],
   "exports": {
     ".": "./index.js",
+    "./client": "./client.js",
     "./server": {
       "deno": "./server.browser.js",
       "worker": "./server.browser.js",
diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
index 3507e2440981e..1f26e615bb01b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
@@ -11,6 +11,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
   let act;
   let React;
   let ReactDOM;
+  let ReactDOMClient;
 
   let ErrorBoundary;
   let NoError;
@@ -22,6 +23,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
     act = require('jest-react').act;
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     ErrorBoundary = class extends React.Component {
       state = {error: null};
@@ -49,7 +51,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
     window.removeEventListener('error', windowOnError);
   });
 
-  describe('ReactDOM.createRoot', () => {
+  describe('ReactDOMClient.createRoot', () => {
     it('logs errors during event handlers', () => {
       spyOnDevAndProd(console, 'error');
 
@@ -64,7 +66,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<Foo />);
       });
@@ -150,7 +152,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         throw Error('Boom');
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       expect(() => {
         act(() => {
           root.render(<Foo />);
@@ -230,7 +232,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         throw Error('Boom');
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(
           <ErrorBoundary>
@@ -315,7 +317,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       expect(() => {
         act(() => {
           root.render(<Foo />);
@@ -383,7 +385,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(
           <ErrorBoundary>
@@ -453,7 +455,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       expect(() => {
         act(() => {
           root.render(<Foo />);
@@ -521,7 +523,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(
           <ErrorBoundary>
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index 4389995171d87..a7cecb029b337 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -12,6 +12,7 @@
 let React;
 
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 
@@ -28,6 +29,7 @@ describe('ReactDOMFiberAsync', () => {
     container = document.createElement('div');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
 
@@ -184,7 +186,7 @@ describe('ReactDOMFiberAsync', () => {
           );
         }
       }
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Counter />);
       Scheduler.unstable_flushAll();
       expect(asyncValueRef.current.textContent).toBe('');
@@ -204,7 +206,7 @@ describe('ReactDOMFiberAsync', () => {
     });
 
     it('top-level updates are concurrent', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<div>Hi</div>);
       expect(container.textContent).toEqual('');
       Scheduler.unstable_flushAll();
@@ -226,7 +228,7 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Component />);
       expect(container.textContent).toEqual('');
       Scheduler.unstable_flushAll();
@@ -256,7 +258,7 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Component />);
       Scheduler.unstable_flushAll();
 
@@ -298,7 +300,7 @@ describe('ReactDOMFiberAsync', () => {
           return this.state.counter;
         }
       }
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Counter />);
       Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('0');
@@ -401,7 +403,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -452,7 +454,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -511,7 +513,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -576,7 +578,7 @@ describe('ReactDOMFiberAsync', () => {
   });
 
   it('updates flush without yielding in the next event', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function Text(props) {
       Scheduler.unstable_yieldValue(props.text);
@@ -621,7 +623,7 @@ describe('ReactDOMFiberAsync', () => {
       return <button ref={ref}>new</button>;
     }
 
-    const oldRoot = ReactDOM.createRoot(container);
+    const oldRoot = ReactDOMClient.createRoot(container);
     act(() => {
       oldRoot.render(<OldApp />);
     });
@@ -633,7 +635,7 @@ describe('ReactDOMFiberAsync', () => {
     expect(container.textContent).toBe('');
 
     // We can now render a new one.
-    const newRoot = ReactDOM.createRoot(container);
+    const newRoot = ReactDOMClient.createRoot(container);
     ReactDOM.flushSync(() => {
       newRoot.render(<NewApp />);
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 0b14e567c7e0d..90b339bb281eb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -13,7 +13,7 @@ let JSDOM;
 let Stream;
 let Scheduler;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMFizzServer;
 let Suspense;
 let SuspenseList;
@@ -36,7 +36,7 @@ describe('ReactDOMFizzServer', () => {
     JSDOM = require('jsdom').JSDOM;
     Scheduler = require('scheduler');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     if (__EXPERIMENTAL__) {
       ReactDOMFizzServer = require('react-dom/server');
     }
@@ -346,7 +346,7 @@ describe('ReactDOMFizzServer', () => {
     // Client-side
     const [HydrateApp, hydrateResolve] = makeApp();
     await act(async () => {
-      ReactDOM.hydrateRoot(container, <HydrateApp />);
+      ReactDOMClient.hydrateRoot(container, <HydrateApp />);
     });
 
     expect(getVisibleChildren(container)).toEqual(
@@ -424,7 +424,7 @@ describe('ReactDOMFizzServer', () => {
     window.__INIT__ = function() {
       bootstrapped = true;
       // Attempt to hydrate the content.
-      ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -538,7 +538,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -611,7 +611,7 @@ describe('ReactDOMFizzServer', () => {
     window.__INIT__ = function() {
       bootstrapped = true;
       // Attempt to hydrate the content.
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     };
 
     await act(async () => {
@@ -708,7 +708,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -779,7 +779,10 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
-    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showMore={false} />,
+    );
     Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
@@ -846,7 +849,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1542,7 +1545,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1731,7 +1734,7 @@ describe('ReactDOMFizzServer', () => {
 
     let root;
     await act(async () => {
-      root = ReactDOM.hydrateRoot(container, <App isClient={false} />);
+      root = ReactDOMClient.hydrateRoot(container, <App isClient={false} />);
       Scheduler.unstable_flushAll();
       await jest.runAllTimers();
     });
@@ -1817,7 +1820,7 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Log recoverable error: ' + error.message,
@@ -1917,7 +1920,7 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Log recoverable error: ' + error.message,
@@ -2019,7 +2022,7 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -2110,7 +2113,7 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -2198,7 +2201,7 @@ describe('ReactDOMFizzServer', () => {
 
       // Hydrate the tree. Child will throw during render.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(
             'Log recoverable error: ' + error.message,
@@ -2280,7 +2283,7 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -2349,7 +2352,7 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container, {
+    const root = ReactDOMClient.createRoot(container, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Logged a recoverable error: ' + error.message,
@@ -2431,7 +2434,7 @@ describe('ReactDOMFizzServer', () => {
     // Hydrate the tree. Child will throw during hydration, but not when it
     // falls back to client rendering.
     isClient = true;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Logged recoverable error: ' + error.message,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
index f2668b74fe67d..f3ff64daeec43 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -9,7 +9,7 @@
 
 let JSDOM;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let clientAct;
 let ReactDOMFizzServer;
@@ -27,7 +27,7 @@ describe('ReactDOMFizzShellHydration', () => {
     jest.resetModules();
     JSDOM = require('jsdom').JSDOM;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     clientAct = require('jest-react').act;
     ReactDOMFizzServer = require('react-dom/server');
@@ -180,7 +180,7 @@ describe('ReactDOMFizzShellHydration', () => {
 
     // Hydration suspends because the data for the shell hasn't loaded yet
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
     expect(div.current).toBe(null);
@@ -201,7 +201,7 @@ describe('ReactDOMFizzShellHydration', () => {
       return <AsyncText text="Shell" />;
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await clientAct(async () => {
       root.render(<App />);
     });
@@ -232,7 +232,7 @@ describe('ReactDOMFizzShellHydration', () => {
 
     // Hydration suspends because the data for the shell hasn't loaded yet
     const root = await clientAct(async () => {
-      return ReactDOM.hydrateRoot(container, <App />, {
+      return ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
index 7aed4305876b6..58613152f7fc0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 
@@ -22,6 +23,7 @@ describe('ReactDOMHooks', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
 
@@ -127,7 +129,7 @@ describe('ReactDOMHooks', () => {
     const inputRef = createRef();
     const labelRef = createRef();
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
 
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
index bc7316349196a..dc6c35ad9349f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
@@ -13,6 +13,7 @@ let React;
 let Scheduler;
 // let ReactCache;
 let ReactDOM;
+let ReactDOMClient;
 // let Suspense;
 let originalCreateElement;
 // let TextResource;
@@ -89,6 +90,7 @@ describe('ReactDOMImageLoad', () => {
     Scheduler = require('scheduler');
     // ReactCache = require('react-cache');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     // Suspense = React.Suspense;
 
     onLoadSpy = jest.fn(reactEvent => {
@@ -181,7 +183,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('captures the load event if it happens before commit phase and replays it between layout and passive effects', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     React.startTransition(() =>
       root.render(
@@ -221,7 +223,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('captures the load event if it happens after commit phase and replays it', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     React.startTransition(() =>
       root.render(
@@ -251,7 +253,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('it replays the last load event when more than one fire before the end of the layout phase completes', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function Base() {
       const [src, setSrc] = React.useState('a');
@@ -302,7 +304,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('replays load events that happen in passive phase after the passive phase.', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     root.render(
       <PhaseMarkers>
@@ -328,7 +330,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('captures and suppresses the load event if it happens before passive effects and a cascading update causes the img to be removed', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function ChildSuppressing({children}) {
       const [showChildren, update] = React.useState(true);
@@ -377,7 +379,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('captures and suppresses the load event if it happens before passive effects and a cascading update causes the img to be removed, alternate', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function Switch({children}) {
       const [shouldShow, updateShow] = React.useState(true);
@@ -456,7 +458,7 @@ describe('ReactDOMImageLoad', () => {
   //   }
 
   //   const container = document.createElement('div');
-  //   const root = ReactDOM.createRoot(container);
+  //   const root = ReactDOMClient.createRoot(container);
 
   //   React.startTransition(() => root.render(<SuspendingWithImage />));
 
@@ -531,7 +533,7 @@ describe('ReactDOMImageLoad', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     root.render(<Base />);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 94c5fe35290bd..ab7609b142fe6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -12,6 +12,7 @@
 let React;
 
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 
@@ -23,6 +24,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     container = document.createElement('div');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
 
@@ -65,7 +67,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(() => {
       root.render(<Form />);
     });
@@ -121,7 +123,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<Form />);
     // Flush
     Scheduler.unstable_flushAll();
@@ -181,7 +183,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<Form />);
     // Flush
     Scheduler.unstable_flushAll();
@@ -212,7 +214,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('mouse over should be user-blocking but not discrete', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -242,7 +244,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('mouse enter should be user-blocking but not discrete', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -274,7 +276,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('continuous native events flush as expected', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo({hovered}) {
@@ -313,7 +315,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('should batch inside native events', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -349,7 +351,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('should not flush discrete events at the end of outermost batchedUpdates', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     let target;
     function Foo() {
diff --git a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
index 6fb1b1072bdf1..dd1474b5f9ec3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
@@ -11,7 +11,7 @@
 
 describe('ReactDOMNestedEvents', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let act;
   let useState;
@@ -19,7 +19,7 @@ describe('ReactDOMNestedEvents', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
     useState = React.useState;
@@ -55,7 +55,7 @@ describe('ReactDOMNestedEvents', () => {
 
     const container = document.createElement('div');
     document.body.appendChild(container);
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     await act(async () => {
       root.render(<App />);
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index b39e554e49bc5..df693b8784992 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -11,6 +11,7 @@
 
 let React = require('react');
 let ReactDOM = require('react-dom');
+let ReactDOMClient = require('react-dom/client');
 let ReactDOMServer = require('react-dom/server');
 let Scheduler = require('scheduler');
 let act;
@@ -24,6 +25,7 @@ describe('ReactDOMRoot', () => {
     container = document.createElement('div');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
@@ -31,15 +33,35 @@ describe('ReactDOMRoot', () => {
   });
 
   it('renders children', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
   });
 
+  it('warns if you import createRoot from react-dom', async () => {
+    expect(() => ReactDOM.createRoot(container)).toErrorDev(
+      'You are importing createRoot from "react-dom" which is not supported. ' +
+        'You should instead import it from "react-dom/client".',
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
+  it('warns if you import hydrateRoot from react-dom', async () => {
+    expect(() => ReactDOM.hydrateRoot(container, null)).toErrorDev(
+      'You are importing hydrateRoot from "react-dom" which is not supported. ' +
+        'You should instead import it from "react-dom/client".',
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
   it('warns if a callback parameter is provided to render', () => {
     const callback = jest.fn();
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() =>
       root.render(<div>Hi</div>, callback),
     ).toErrorDev(
@@ -56,7 +78,7 @@ describe('ReactDOMRoot', () => {
       return 'Child';
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() => root.render(<App />, {})).toErrorDev(
       'You passed a second argument to root.render(...) but it only accepts ' +
         'one argument.',
@@ -71,7 +93,7 @@ describe('ReactDOMRoot', () => {
       return 'Child';
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() => root.render(<App />, container)).toErrorDev(
       'You passed a container to the second argument of root.render(...). ' +
         "You don't need to pass it again since you already passed it to create " +
@@ -84,7 +106,7 @@ describe('ReactDOMRoot', () => {
 
   it('warns if a callback parameter is provided to unmount', () => {
     const callback = jest.fn();
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     expect(() =>
       root.unmount(callback),
@@ -98,7 +120,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('unmounts children', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -121,7 +143,7 @@ describe('ReactDOMRoot', () => {
     // Does not hydrate by default
     const container1 = document.createElement('div');
     container1.innerHTML = markup;
-    const root1 = ReactDOM.createRoot(container1);
+    const root1 = ReactDOMClient.createRoot(container1);
     root1.render(
       <div>
         <span />
@@ -131,7 +153,7 @@ describe('ReactDOMRoot', () => {
 
     const container2 = document.createElement('div');
     container2.innerHTML = markup;
-    ReactDOM.hydrateRoot(
+    ReactDOMClient.hydrateRoot(
       container2,
       <div>
         <span />
@@ -163,7 +185,7 @@ describe('ReactDOMRoot', () => {
 
   it('clears existing children', async () => {
     container.innerHTML = '<div>a</div><div>b</div>';
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(
       <div>
         <span>c</span>
@@ -184,12 +206,12 @@ describe('ReactDOMRoot', () => {
 
   it('throws a good message on invalid containers', () => {
     expect(() => {
-      ReactDOM.createRoot(<div>Hi</div>);
+      ReactDOMClient.createRoot(<div>Hi</div>);
     }).toThrow('createRoot(...): Target container is not a DOM element.');
   });
 
   it('warns when rendering with legacy API into createRoot() container', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -199,7 +221,7 @@ describe('ReactDOMRoot', () => {
       [
         // We care about this warning:
         'You are calling ReactDOM.render() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
           'Did you mean to call root.render(element)?',
         // This is more of a symptom but restructuring the code to avoid it isn't worth it:
         'Replacing React-rendered children with a new root component.',
@@ -212,7 +234,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when hydrating with legacy API into createRoot() container', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -222,7 +244,7 @@ describe('ReactDOMRoot', () => {
       [
         // We care about this warning:
         'You are calling ReactDOM.hydrate() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
           'Did you mean to call hydrateRoot(container, element)?',
         // This is more of a symptom but restructuring the code to avoid it isn't worth it:
         'Replacing React-rendered children with a new root component.',
@@ -232,7 +254,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when unmounting with legacy API (no previous content)', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -243,7 +265,7 @@ describe('ReactDOMRoot', () => {
       [
         // We care about this warning:
         'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
+          'passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?',
         // This is more of a symptom but restructuring the code to avoid it isn't worth it:
         "The node you're attempting to unmount was rendered by React and is not a top-level container.",
       ],
@@ -261,7 +283,7 @@ describe('ReactDOMRoot', () => {
     // Currently createRoot().render() doesn't clear this.
     container.appendChild(document.createElement('div'));
     // The rest is the same as test above.
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -287,20 +309,20 @@ describe('ReactDOMRoot', () => {
   it('warns when passing legacy container to createRoot()', () => {
     ReactDOM.render(<div>Hi</div>, container);
     expect(() => {
-      ReactDOM.createRoot(container);
+      ReactDOMClient.createRoot(container);
     }).toErrorDev(
-      'You are calling ReactDOM.createRoot() on a container that was previously ' +
+      'You are calling ReactDOMClient.createRoot() on a container that was previously ' +
         'passed to ReactDOM.render(). This is not supported.',
       {withoutStack: true},
     );
   });
 
   it('warns when creating two roots managing the same container', () => {
-    ReactDOM.createRoot(container);
+    ReactDOMClient.createRoot(container);
     expect(() => {
-      ReactDOM.createRoot(container);
+      ReactDOMClient.createRoot(container);
     }).toErrorDev(
-      'You are calling ReactDOM.createRoot() on a container that ' +
+      'You are calling ReactDOMClient.createRoot() on a container that ' +
         'has already been passed to createRoot() before. Instead, call ' +
         'root.render() on the existing root instead if you want to update it.',
       {withoutStack: true},
@@ -308,15 +330,15 @@ describe('ReactDOMRoot', () => {
   });
 
   it('does not warn when creating second root after first one is unmounted', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.unmount();
     Scheduler.unstable_flushAll();
-    ReactDOM.createRoot(container); // No warning
+    ReactDOMClient.createRoot(container); // No warning
   });
 
   it('warns if creating a root on the document.body', async () => {
     expect(() => {
-      ReactDOM.createRoot(document.body);
+      ReactDOMClient.createRoot(document.body);
     }).toErrorDev(
       'createRoot(): Creating roots directly with document.body is ' +
         'discouraged, since its children are often manipulated by third-party ' +
@@ -328,7 +350,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns if updating a root that has had its contents removed', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     container.innerHTML = '';
@@ -345,7 +367,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('opts-in to concurrent default updates', async () => {
-    const root = ReactDOM.createRoot(container, {
+    const root = ReactDOMClient.createRoot(container, {
       unstable_concurrentUpdatesByDefault: true,
     });
 
@@ -377,7 +399,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('unmount is synchronous', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render('Hi');
     });
@@ -391,7 +413,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('throws if an unmounted root is updated', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render('Hi');
     });
@@ -406,9 +428,9 @@ describe('ReactDOMRoot', () => {
 
   it('warns if root is unmounted inside an effect', async () => {
     const container1 = document.createElement('div');
-    const root1 = ReactDOM.createRoot(container1);
+    const root1 = ReactDOMClient.createRoot(container1);
     const container2 = document.createElement('div');
-    const root2 = ReactDOM.createRoot(container2);
+    const root2 = ReactDOMClient.createRoot(container2);
 
     function App({step}) {
       useEffect(() => {
@@ -441,10 +463,10 @@ describe('ReactDOMRoot', () => {
     div.innerHTML = '<!-- react-mount-point-unstable -->';
     const commentNode = div.childNodes[0];
 
-    expect(() => ReactDOM.createRoot(commentNode)).toThrow(
+    expect(() => ReactDOMClient.createRoot(commentNode)).toThrow(
       'createRoot(...): Target container is not a DOM element.',
     );
-    expect(() => ReactDOM.hydrateRoot(commentNode)).toThrow(
+    expect(() => ReactDOMClient.hydrateRoot(commentNode)).toThrow(
       'hydrateRoot(...): Target container is not a DOM element.',
     );
 
@@ -454,7 +476,7 @@ describe('ReactDOMRoot', () => {
 
   it('warn if no children passed to hydrateRoot', async () => {
     expect(() =>
-      ReactDOM.hydrateRoot(container),
+      ReactDOMClient.hydrateRoot(container),
     ).toErrorDev(
       'Must provide initial children as second argument to hydrateRoot.',
       {withoutStack: true},
@@ -466,7 +488,7 @@ describe('ReactDOMRoot', () => {
       return 'Child';
     }
 
-    expect(() => ReactDOM.createRoot(container, <App />)).toErrorDev(
+    expect(() => ReactDOMClient.createRoot(container, <App />)).toErrorDev(
       'You passed a JSX element to createRoot. You probably meant to call ' +
         'root.render instead',
       {
diff --git a/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
index 1e12bb611ca78..0ba0848d8e3cd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
@@ -11,7 +11,7 @@
 
 let React;
 
-let ReactDOM;
+let ReactDOMClient;
 let act;
 
 describe('ReactDOMSafariMicrotaskBug-test', () => {
@@ -35,7 +35,7 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
     jest.resetModules();
     container = document.createElement('div');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
 
     document.body.appendChild(container);
@@ -62,7 +62,7 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
         </div>
       );
     }
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<Foo />);
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index f19c38bc38cd5..7e25788c9232d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -11,6 +11,7 @@
 
 let React = require('react');
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let ReactFeatureFlags;
@@ -100,6 +101,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
@@ -164,7 +166,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -217,7 +219,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -310,7 +312,7 @@ describe('ReactDOMServerPartialHydration', () => {
       suspend = true;
       client = true;
 
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -426,7 +428,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     suspend2 = true;
-    const root = ReactDOM.hydrateRoot(container, <App />, {
+    const root = ReactDOMClient.hydrateRoot(container, <App />, {
       onHydrated(node) {
         hydrated.push(node);
       },
@@ -483,7 +485,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -517,7 +519,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />, {
+        ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(error.message);
           },
@@ -590,7 +592,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
       shouldSuspend = true;
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />);
+        ReactDOMClient.hydrateRoot(container, <App hasB={false} />);
       });
 
       resolve();
@@ -651,7 +653,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />, {
+        ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(error.message);
           },
@@ -709,7 +711,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App />, {
+    const root = ReactDOMClient.hydrateRoot(container, <App />, {
       onDeleted(node) {
         deleted.push(node);
       },
@@ -770,7 +772,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.hydrateRoot(container, <App />)' +
+        'ReactDOMClient.hydrateRoot(container, <App />)' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +
@@ -850,7 +852,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     act(() => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
@@ -906,7 +908,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     act(() => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.children[1].textContent).toBe('Middle');
@@ -955,7 +957,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
     );
@@ -1029,7 +1031,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
     );
@@ -1102,7 +1104,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
       {
@@ -1188,7 +1190,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
       {
@@ -1273,7 +1275,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
       {
@@ -1357,7 +1359,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
     );
@@ -1439,7 +1441,10 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    ReactDOM.hydrateRoot(container, <App text="Hello" className="hello" />);
+    ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
 
     await act(async () => {
       suspend = true;
@@ -1509,7 +1514,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
@@ -1591,7 +1596,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
@@ -1680,7 +1685,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1742,7 +1747,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1809,7 +1814,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1882,7 +1887,10 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanB = container.getElementsByTagName('span')[1];
 
-    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showMore={false} />,
+    );
     suspend = true;
     Scheduler.unstable_flushAll();
 
@@ -1962,7 +1970,10 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanA = container.getElementsByTagName('span')[0];
 
-    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showMore={false} />,
+    );
 
     suspend = true;
     Scheduler.unstable_flushAll();
@@ -2048,7 +2059,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const b = container.getElementsByTagName('span')[1];
     expect(b.textContent).toBe('B');
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    const root = ReactDOMClient.hydrateRoot(container, <App />);
 
     // Increase hydration priority to higher than "offscreen".
     root.unstable_scheduleHydration(b);
@@ -2119,7 +2130,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = html;
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -2184,7 +2195,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[1];
 
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -2233,7 +2244,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2285,7 +2296,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <ClassName.Provider value={'hello'}>
         <App text="Hello" />
@@ -2388,7 +2399,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2475,7 +2486,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2565,7 +2576,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     await act(async () => {
@@ -2660,7 +2671,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2747,7 +2758,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2822,7 +2833,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // We're going to use a different root as a parent.
     // This lets us detect whether an event goes through React's event system.
-    const parentRoot = ReactDOM.createRoot(parentContainer);
+    const parentRoot = ReactDOMClient.createRoot(parentContainer);
     parentRoot.render(<Parent />);
     Scheduler.unstable_flushAll();
 
@@ -2835,7 +2846,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     // Hydrate asynchronously.
-    ReactDOM.hydrateRoot(childContainer, <App />);
+    ReactDOMClient.hydrateRoot(childContainer, <App />);
     jest.runAllTimers();
     Scheduler.unstable_flushAll();
 
@@ -2933,7 +2944,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend1 = true;
     suspend2 = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -3019,7 +3030,10 @@ describe('ReactDOMServerPartialHydration', () => {
     container.innerHTML = finalHTML;
 
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App showSibling={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showSibling={false} />,
+    );
     expect(Scheduler).toFlushAndYield([]);
 
     expect(ref.current).toBe(null);
@@ -3105,7 +3119,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -3170,7 +3184,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Log recoverable error: ' + error.message,
@@ -3205,7 +3219,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(span.innerHTML).toBe('Hidden child');
@@ -3230,7 +3244,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const span = container.getElementsByTagName('span')[0];
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
@@ -3243,7 +3257,7 @@ describe('ReactDOMServerPartialHydration', () => {
       const finalHTML = ReactDOMServer.renderToString(<App />);
       container.innerHTML = finalHTML;
 
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
       Scheduler.unstable_flushAll();
     });
   }
@@ -3321,7 +3335,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App />, {
+        ReactDOMClient.hydrateRoot(container, <App />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(
               'Log recoverable error: ' + error.message,
@@ -3373,7 +3387,7 @@ describe('ReactDOMServerPartialHydration', () => {
     );
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <DirectTextChild text="bad" />, {
+        ReactDOMClient.hydrateRoot(container, <DirectTextChild text="bad" />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(error.message);
           },
@@ -3414,11 +3428,15 @@ describe('ReactDOMServerPartialHydration', () => {
     );
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container2, <TextChildWithSibling text="bad" />, {
-          onRecoverableError(error) {
-            Scheduler.unstable_yieldValue(error.message);
+        ReactDOMClient.hydrateRoot(
+          container2,
+          <TextChildWithSibling text="bad" />,
+          {
+            onRecoverableError(error) {
+              Scheduler.unstable_yieldValue(error.message);
+            },
           },
-        });
+        );
       });
     }).toErrorDev(
       [
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 435e90d9b1820..91321ea6dd5bf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -13,6 +13,7 @@ import {createEventTarget} from 'dom-event-testing-library';
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactFeatureFlags;
 let Scheduler;
@@ -117,6 +118,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     ReactFeatureFlags.enableCreateEventHandleAPI = true;
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
@@ -165,7 +167,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     const span = container.getElementsByTagName('span')[1];
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -243,7 +245,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -341,7 +343,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -440,7 +442,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     isServerRendering = false;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -525,7 +527,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -623,7 +625,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -732,7 +734,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -882,7 +884,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -974,18 +976,18 @@ describe('ReactDOMServerSelectiveHydration', () => {
     beforeEach(async () => {
       document.body.innerHTML = '';
       jest.resetModuleRegistry();
-      let OuterReactDOM;
-      let InnerReactDOM;
+      let OuterReactDOMClient;
+      let InnerReactDOMClient;
       jest.isolateModules(() => {
-        OuterReactDOM = require('react-dom');
+        OuterReactDOMClient = require('react-dom/client');
         OuterScheduler = require('scheduler');
       });
       jest.isolateModules(() => {
-        InnerReactDOM = require('react-dom');
+        InnerReactDOMClient = require('react-dom/client');
         InnerScheduler = require('scheduler');
       });
 
-      expect(OuterReactDOM).not.toBe(InnerReactDOM);
+      expect(OuterReactDOMClient).not.toBe(InnerReactDOMClient);
       expect(OuterScheduler).not.toBe(InnerScheduler);
 
       const outerContainer = document.createElement('div');
@@ -1071,8 +1073,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
       suspendOuter = true;
       suspendInner = true;
 
-      OuterReactDOM.hydrateRoot(outerContainer, <OuterApp />);
-      InnerReactDOM.hydrateRoot(innerContainer, <InnerApp />);
+      OuterReactDOMClient.hydrateRoot(outerContainer, <OuterApp />);
+      InnerReactDOMClient.hydrateRoot(innerContainer, <InnerApp />);
 
       expect(OuterScheduler).toFlushAndYield(['Suspend Outer']);
       expect(InnerScheduler).toFlushAndYield(['Suspend Inner']);
@@ -1271,7 +1273,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     container.innerHTML = finalHTML;
     suspend = true;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     const childDiv = container.firstElementChild;
     dispatchMouseHoverEvent(childDiv);
@@ -1365,7 +1367,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1423,7 +1425,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanB = container.getElementsByTagName('span')[1];
     const spanC = container.getElementsByTagName('span')[2];
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    const root = ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1481,7 +1483,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanC = container.getElementsByTagName('span')[4];
 
     act(() => {
-      const root = ReactDOM.hydrateRoot(container, <App a="A" />);
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
       // Hydrate the shell.
       expect(Scheduler).toFlushAndYieldThrough(['App', 'Commit']);
 
@@ -1607,7 +1609,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     const span = container.getElementsByTagName('span')[1];
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1679,7 +1681,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     suspend = true;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 1611b904bef1a..83c8605e496ef 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -13,6 +13,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 let act;
@@ -24,6 +25,7 @@ function initModules() {
 
   React = require('react');
   ReactDOM = require('react-dom');
+  ReactDOMClient = require('react-dom/client');
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
   act = require('jest-react').act;
@@ -163,7 +165,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      ReactDOM.hydrateRoot(parent, example);
+      ReactDOMClient.hydrateRoot(parent, example);
     });
 
     const parent2 = element.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index d3fb8b3ae70a6..4148eeaa2e640 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -9,7 +9,7 @@
 
 let JSDOM;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let clientAct;
 let ReactDOMFizzServer;
@@ -29,7 +29,7 @@ describe('useId', () => {
     jest.resetModules();
     JSDOM = require('jsdom').JSDOM;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     clientAct = require('jest-react').act;
     ReactDOMFizzServer = require('react-dom/server');
@@ -136,7 +136,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -181,7 +181,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -220,7 +220,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -256,7 +256,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -311,7 +311,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     const divs = container.querySelectorAll('div');
 
@@ -335,7 +335,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     // We append a suffix to the end of the id to distinguish them
     expect(container).toMatchInlineSnapshot(`
@@ -362,7 +362,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -392,7 +392,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -443,7 +443,7 @@ describe('useId', () => {
     });
     const dehydratedSpan = container.getElementsByTagName('span')[0];
     await clientAct(async () => {
-      const root = ReactDOM.hydrateRoot(container, <App />);
+      const root = ReactDOMClient.hydrateRoot(container, <App />);
       expect(Scheduler).toFlushUntilNextPaint([]);
       expect(container).toMatchInlineSnapshot(`
         <div
@@ -524,7 +524,7 @@ describe('useId', () => {
     });
     const dehydratedSpan = container.getElementsByTagName('span')[0];
     await clientAct(async () => {
-      const root = ReactDOM.hydrateRoot(container, <App />);
+      const root = ReactDOMClient.hydrateRoot(container, <App />);
       expect(Scheduler).toFlushUntilNextPaint([]);
       expect(container).toMatchInlineSnapshot(`
         <div
@@ -598,7 +598,7 @@ describe('useId', () => {
     });
     let root;
     await clientAct(async () => {
-      root = ReactDOM.hydrateRoot(container, <App />, {
+      root = ReactDOMClient.hydrateRoot(container, <App />, {
         identifierPrefix: 'custom-prefix-',
       });
     });
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 3d63954a0857f..11a7a510afd3e 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 
@@ -21,6 +22,7 @@ describe('ReactDOMServerHydration', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
   });
@@ -403,7 +405,7 @@ describe('ReactDOMServerHydration', () => {
     const finalHTML = ReactDOMServer.renderToString(<div />);
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
-    const root = ReactDOM.hydrateRoot(container, <div />);
+    const root = ReactDOMClient.hydrateRoot(container, <div />);
     Scheduler.unstable_flushAll();
     root.render(null);
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 71adc286d08ba..ca7aa3317c5cc 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -9,6 +9,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactTestUtils;
 let Scheduler;
 let act;
@@ -31,7 +32,7 @@ describe('ReactTestUtils.act()', () => {
   if (__EXPERIMENTAL__) {
     let concurrentRoot = null;
     const renderConcurrent = (el, dom) => {
-      concurrentRoot = ReactDOM.createRoot(dom);
+      concurrentRoot = ReactDOMClient.createRoot(dom);
       if (__DEV__) {
         act(() => concurrentRoot.render(el));
       } else {
@@ -100,7 +101,7 @@ describe('ReactTestUtils.act()', () => {
 
     // @gate __DEV__
     it('does not warn in concurrent mode', () => {
-      const root = ReactDOM.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
       act(() => root.render(<App />));
       Scheduler.unstable_flushAll();
     });
@@ -113,6 +114,7 @@ function runActTests(label, render, unmount, rerender) {
       jest.resetModules();
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       ReactTestUtils = require('react-dom/test-utils');
       Scheduler = require('scheduler');
       act = ReactTestUtils.act;
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index 42647abf53b4a..9e81a3b20ff1c 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactTestUtils;
 let act;
 let Scheduler;
@@ -20,6 +21,7 @@ describe('ReactUpdates', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactTestUtils = require('react-dom/test-utils');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
@@ -1332,7 +1334,7 @@ describe('ReactUpdates', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     let hiddenDiv;
     act(() => {
       root.render(<Foo />);
@@ -1709,7 +1711,7 @@ describe('ReactUpdates', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() => {
       ReactDOM.flushSync(() => {
         root.render(<NonTerminating />);
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index c3f9e3fcb47e1..e85a580aed72a 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -9,6 +9,11 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Container} from './ReactDOMHostConfig';
+import type {
+  RootType,
+  HydrateRootOptions,
+  CreateRootOptions,
+} from './ReactDOMRoot';
 
 import {
   findDOMNode,
@@ -17,7 +22,11 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, hydrateRoot, isValidContainer} from './ReactDOMRoot';
+import {
+  createRoot as createRootImpl,
+  hydrateRoot as hydrateRootImpl,
+  isValidContainer,
+} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -125,6 +134,7 @@ function renderSubtreeIntoContainer(
 }
 
 const Internals = {
+  usingClientEntryPoint: false,
   // Keep in sync with ReactTestUtils.js.
   // This is an array for better minification.
   Events: [
@@ -137,6 +147,37 @@ const Internals = {
   ],
 };
 
+function createRoot(
+  container: Container,
+  options?: CreateRootOptions,
+): RootType {
+  if (__DEV__) {
+    if (!Internals.usingClientEntryPoint) {
+      console.error(
+        'You are importing createRoot from "react-dom" which is not supported. ' +
+          'You should instead import it from "react-dom/client".',
+      );
+    }
+  }
+  return createRootImpl(container, options);
+}
+
+function hydrateRoot(
+  container: Container,
+  initialChildren: ReactNodeList,
+  options?: HydrateRootOptions,
+): RootType {
+  if (__DEV__) {
+    if (!Internals.usingClientEntryPoint) {
+      console.error(
+        'You are importing hydrateRoot from "react-dom" which is not supported. ' +
+          'You should instead import it from "react-dom/client".',
+      );
+    }
+  }
+  return hydrateRootImpl(container, initialChildren, options);
+}
+
 // Overload the definition to the two valid signatures.
 // Warning, this opts-out of checking the function body.
 declare function flushSync<R>(fn: () => R): R;
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 1c53b5620b677..3b751405a3034 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -256,7 +256,7 @@ export function hydrate(
     if (isModernRoot) {
       console.error(
         'You are calling ReactDOM.hydrate() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
           'Did you mean to call hydrateRoot(container, element)?',
       );
     }
@@ -296,7 +296,7 @@ export function render(
     if (isModernRoot) {
       console.error(
         'You are calling ReactDOM.render() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
           'Did you mean to call root.render(element)?',
       );
     }
@@ -356,7 +356,7 @@ export function unmountComponentAtNode(container: Container) {
     if (isModernRoot) {
       console.error(
         'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
+          'passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?',
       );
     }
   }
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 57bbe7ab96d68..d71de3bb0c26d 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -184,7 +184,7 @@ export function createRoot(
     if (__DEV__) {
       if ((options: any).hydrate) {
         console.warn(
-          'hydrate through createRoot is deprecated. Use ReactDOM.hydrateRoot(container, <App />) instead.',
+          'hydrate through createRoot is deprecated. Use ReactDOMClient.hydrateRoot(container, <App />) instead.',
         );
       } else {
         if (
@@ -369,12 +369,12 @@ function warnIfReactDOMContainerInDEV(container) {
     if (isContainerMarkedAsRoot(container)) {
       if (container._reactRootContainer) {
         console.error(
-          'You are calling ReactDOM.createRoot() on a container that was previously ' +
+          'You are calling ReactDOMClient.createRoot() on a container that was previously ' +
             'passed to ReactDOM.render(). This is not supported.',
         );
       } else {
         console.error(
-          'You are calling ReactDOM.createRoot() on a container that ' +
+          'You are calling ReactDOMClient.createRoot() on a container that ' +
             'has already been passed to createRoot() before. Instead, call ' +
             'root.render() on the existing root instead if you want to update it.',
         );
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 248c07020e551..bcc3f15c44e79 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -14,6 +14,7 @@ import {createEventTarget} from 'dom-event-testing-library';
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let act;
@@ -64,6 +65,7 @@ describe('DOMPluginEventSystem', () => {
 
           React = require('react');
           ReactDOM = require('react-dom');
+          ReactDOMClient = require('react-dom/client');
           Scheduler = require('scheduler');
           ReactDOMServer = require('react-dom/server');
           act = require('jest-react').act;
@@ -616,7 +618,7 @@ describe('DOMPluginEventSystem', () => {
 
           // We're going to use a different root as a parent.
           // This lets us detect whether an event goes through React's event system.
-          const parentRoot = ReactDOM.createRoot(parentContainer);
+          const parentRoot = ReactDOMClient.createRoot(parentContainer);
           parentRoot.render(<Parent />);
           Scheduler.unstable_flushAll();
 
@@ -629,7 +631,7 @@ describe('DOMPluginEventSystem', () => {
           suspend = true;
 
           // Hydrate asynchronously.
-          ReactDOM.hydrateRoot(childContainer, <App />);
+          ReactDOMClient.hydrateRoot(childContainer, <App />);
           jest.runAllTimers();
           Scheduler.unstable_flushAll();
 
@@ -1258,6 +1260,7 @@ describe('DOMPluginEventSystem', () => {
 
             React = require('react');
             ReactDOM = require('react-dom');
+            ReactDOMClient = require('react-dom/client');
             Scheduler = require('scheduler');
             ReactDOMServer = require('react-dom/server');
             act = require('jest-react').act;
@@ -1940,7 +1943,7 @@ describe('DOMPluginEventSystem', () => {
               return <button ref={ref}>Press me</button>;
             }
 
-            const root = ReactDOM.createRoot(container);
+            const root = ReactDOMClient.createRoot(container);
             root.render(<Test counter={0} />);
 
             expect(Scheduler).toFlushAndYield(['Test']);
@@ -2561,7 +2564,7 @@ describe('DOMPluginEventSystem', () => {
             const container2 = document.createElement('div');
             document.body.appendChild(container2);
 
-            const root = ReactDOM.createRoot(container2);
+            const root = ReactDOMClient.createRoot(container2);
 
             act(() => {
               root.render(<Component />);
@@ -2648,7 +2651,7 @@ describe('DOMPluginEventSystem', () => {
             const container2 = document.createElement('div');
             document.body.appendChild(container2);
 
-            const root = ReactDOM.createRoot(container2);
+            const root = ReactDOMClient.createRoot(container2);
 
             act(() => {
               root.render(<Component />);
@@ -2715,7 +2718,7 @@ describe('DOMPluginEventSystem', () => {
             const container2 = document.createElement('div');
             document.body.appendChild(container2);
 
-            const root = ReactDOM.createRoot(container2);
+            const root = ReactDOMClient.createRoot(container2);
             act(() => {
               root.render(<Component />);
             });
@@ -2872,6 +2875,7 @@ describe('DOMPluginEventSystem', () => {
 
               React = require('react');
               ReactDOM = require('react-dom');
+              ReactDOMClient = require('react-dom/client');
               Scheduler = require('scheduler');
               ReactDOMServer = require('react-dom/server');
             });
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index b1a5649624aeb..db2fd6f7562f3 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactFeatureFlags;
 let Scheduler;
 let act;
@@ -56,6 +57,7 @@ describe('ChangeEventPlugin', () => {
     };
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
     container = document.createElement('div');
@@ -496,7 +498,7 @@ describe('ChangeEventPlugin', () => {
 
   describe('concurrent mode', () => {
     it('text input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -538,7 +540,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('checkbox input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -593,7 +595,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('textarea', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let textarea;
 
       class ControlledTextarea extends React.Component {
@@ -635,7 +637,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('parent of input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -681,7 +683,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('is sync for non-input events', async () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -729,7 +731,7 @@ describe('ChangeEventPlugin', () => {
     it('mouse enter/leave should be user-blocking but not discrete', async () => {
       const {useState} = React;
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       const target = React.createRef(null);
       function Foo() {
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index ba830d939c5f5..cc37fcd0498bc 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -12,6 +12,7 @@
 describe('SimpleEventPlugin', function() {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let act;
 
@@ -39,6 +40,7 @@ describe('SimpleEventPlugin', function() {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     onClick = jest.fn();
@@ -235,6 +237,7 @@ describe('SimpleEventPlugin', function() {
 
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
 
       act = require('jest-react').act;
@@ -242,7 +245,7 @@ describe('SimpleEventPlugin', function() {
 
     it('flushes pending interactive work before exiting event handler', async () => {
       container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       document.body.appendChild(container);
 
       let button;
@@ -317,7 +320,7 @@ describe('SimpleEventPlugin', function() {
     // was dispatched.
     it('end result of many interactive updates is deterministic', async () => {
       container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       document.body.appendChild(container);
 
       let button;
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
index df151bbf72c24..9128692809945 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
@@ -14,6 +14,7 @@ import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
+let ReactDOMClient;
 let useFocusWithin;
 let act;
 let Scheduler;
@@ -26,6 +27,7 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableCreateEventHandleAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
+  ReactDOMClient = require('react-dom/client');
   Scheduler = require('scheduler');
   act = require('jest-react').act;
 
@@ -504,7 +506,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         );
       };
 
-      const root = ReactDOM.createRoot(container2);
+      const root = ReactDOMClient.createRoot(container2);
 
       act(() => {
         root.render(<Component />);
@@ -563,7 +565,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         );
       };
 
-      const root = ReactDOM.createRoot(container2);
+      const root = ReactDOMClient.createRoot(container2);
 
       act(() => {
         root.render(<Component />);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4435fef438938..27a414004c1a7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2628,7 +2628,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.hydrateRoot(container, <App />)' +
+          'ReactDOMClient.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index b037863aa40de..297d5e7d2b5b7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2628,7 +2628,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.hydrateRoot(container, <App />)' +
+          'ReactDOMClient.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index 8c245e1efb32d..999431c694568 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -11,7 +11,11 @@ import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {EventPriority} from './ReactEventPriorities.new';
-import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
+// import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
+// TODO: This import doesn't work because the DevTools depend on the DOM version of React
+// and to properly type check against DOM React we can't also type check again non-DOM
+// React which this hook might be in.
+type DevToolsProfilingHooks = any;
 
 import {
   getLabelForLane,
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index defaf397deb78..000219aa06092 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -11,7 +11,11 @@ import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {EventPriority} from './ReactEventPriorities.old';
-import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
+// import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
+// TODO: This import doesn't work because the DevTools depend on the DOM version of React
+// and to properly type check against DOM React we can't also type check again non-DOM
+// React which this hook might be in.
+type DevToolsProfilingHooks = any;
 
 import {
   getLabelForLane,
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
index 9dd7d85b5b40d..2120aae18b189 100644
--- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -25,10 +25,12 @@ describe('ReactScope', () => {
 
   describe('ReactDOM', () => {
     let ReactDOM;
+    let ReactDOMClient;
     let container;
 
     beforeEach(() => {
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       ReactDOMServer = require('react-dom/server');
       container = document.createElement('div');
       document.body.appendChild(container);
@@ -312,7 +314,7 @@ describe('ReactScope', () => {
       // On the client we don't have all data yet but we want to start
       // hydrating anyway.
       suspend = true;
-      ReactDOM.hydrateRoot(container2, <App />);
+      ReactDOMClient.hydrateRoot(container2, <App />);
       Scheduler.unstable_flushAll();
       jest.runAllTimers();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
index 8ed56bd5f2d96..cb1196baffe6a 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let act;
 
 describe('ReactSuspenseEffectsSemanticsDOM', () => {
@@ -18,7 +18,7 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
   });
 
@@ -63,7 +63,7 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
     }
 
     act(() => {
-      const root = ReactDOM.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
       root.render(<App />);
     });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index 44301017338cb..b4b0b17ef1db0 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -12,6 +12,7 @@
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let mockDevToolsHook;
 let allSchedulerTags;
@@ -90,6 +91,7 @@ describe('updaters', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     act = require('jest-react').act;
@@ -209,7 +211,7 @@ describe('updaters', () => {
       return count;
     };
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(async () => {
       root.render(<Parent />);
       expect(Scheduler).toFlushAndYieldThrough([
@@ -354,7 +356,7 @@ describe('updaters', () => {
       throw new Error('Hello');
     };
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(async () => {
       root.render(<Parent shouldError={false} />);
     });
@@ -404,7 +406,7 @@ describe('updaters', () => {
       return null;
     };
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     root.render(
       <React.Fragment>
         <SyncPriorityUpdater />
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 4e9bd2f0c9973..cb2d7d2ac81b2 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let act;
@@ -22,7 +22,7 @@ describe('useMutableSourceHydration', () => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
 
@@ -160,7 +160,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(0);
 
     act(() => {
-      ReactDOM.hydrateRoot(container, <TestComponent />, {
+      ReactDOMClient.hydrateRoot(container, <TestComponent />, {
         mutableSources: [mutableSource],
       });
     });
@@ -195,7 +195,7 @@ describe('useMutableSourceHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <TestComponent />, {
+        ReactDOMClient.hydrateRoot(container, <TestComponent />, {
           mutableSources: [mutableSource],
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -256,7 +256,7 @@ describe('useMutableSourceHydration', () => {
       act(() => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            ReactDOM.hydrateRoot(container, <TestComponent />, {
+            ReactDOMClient.hydrateRoot(container, <TestComponent />, {
               mutableSources: [mutableSource],
               onRecoverableError(error) {
                 Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -264,7 +264,7 @@ describe('useMutableSourceHydration', () => {
             });
           });
         } else {
-          ReactDOM.hydrateRoot(container, <TestComponent />, {
+          ReactDOMClient.hydrateRoot(container, <TestComponent />, {
             mutableSources: [mutableSource],
             onRecoverableError(error) {
               Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -349,7 +349,7 @@ describe('useMutableSourceHydration', () => {
         );
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            ReactDOM.hydrateRoot(container, fragment, {
+            ReactDOMClient.hydrateRoot(container, fragment, {
               mutableSources: [mutableSource],
               onRecoverableError(error) {
                 Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -357,7 +357,7 @@ describe('useMutableSourceHydration', () => {
             });
           });
         } else {
-          ReactDOM.hydrateRoot(container, fragment, {
+          ReactDOMClient.hydrateRoot(container, fragment, {
             mutableSources: [mutableSource],
             onRecoverableError(error) {
               Scheduler.unstable_yieldValue('Log error: ' + error.message);
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 0a31aa9c62f72..378f44d4ffccf 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -13,6 +13,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactFreshRuntime;
 let Scheduler;
 let act;
@@ -28,6 +29,7 @@ describe('ReactFresh', () => {
       ReactFreshRuntime = require('react-refresh/runtime');
       ReactFreshRuntime.injectIntoGlobalHook(global);
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
       act = require('jest-react').act;
       createReactClass = require('create-react-class/factory')(
@@ -2437,7 +2439,7 @@ describe('ReactFresh', () => {
         };
       });
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<AppV1 offscreen={true} />);
       expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
       const el = container.firstChild;
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 11d25a5a11966..dc981b9bd5304 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -9,7 +9,7 @@
 
 let act;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let JSResourceReference;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
@@ -21,7 +21,7 @@ describe('ReactFlightDOMRelay', () => {
 
     act = require('jest-react').act;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-server-dom-relay');
     JSResourceReference = require('JSResourceReference');
@@ -100,7 +100,7 @@ describe('ReactFlightDOMRelay', () => {
     const modelClient = readThrough(transport);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     act(() => {
       root.render(modelClient.greeting);
     });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index bcae6c50f7c7f..4ca3f903e779c 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -27,7 +27,7 @@ global.__webpack_require__ = function(id) {
 let act;
 let Stream;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 
@@ -39,7 +39,7 @@ describe('ReactFlightDOM', () => {
     act = require('jest-react').act;
     Stream = require('stream');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
   });
@@ -174,7 +174,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -212,7 +212,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -248,7 +248,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -388,7 +388,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(
         <Suspense fallback={<p>(loading)</p>}>
@@ -487,7 +487,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const stream1 = getTestStream();
     const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 09ea1515c9997..c7b97707c166f 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -23,7 +23,7 @@ global.__webpack_require__ = function(id) {
 
 let act;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 
@@ -34,7 +34,7 @@ describe('ReactFlightDOMBrowser', () => {
     webpackMap = {};
     act = require('jest-react').act;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
   });
@@ -270,7 +270,7 @@ describe('ReactFlightDOMBrowser', () => {
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(
         <Suspense fallback={<p>(loading)</p>}>
diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
index 3cf0e40b65dbc..772905b7e0142 100644
--- a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 PropTypes = null
 React = null
 ReactDOM = null
+ReactDOMClient = null
 act = null
 
 describe 'ReactCoffeeScriptClass', ->
@@ -20,10 +21,11 @@ describe 'ReactCoffeeScriptClass', ->
   beforeEach ->
     React = require 'react'
     ReactDOM = require 'react-dom'
+    ReactDOMClient = require 'react-dom/client'
     act = require('jest-react').act
     PropTypes = require 'prop-types'
     container = document.createElement 'div'
-    root = ReactDOM.createRoot container
+    root = ReactDOMClient.createRoot container
     attachedListener = null
     renderedName = null
     InnerComponent = class extends React.Component
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
index 3c15930a3798a..67b9e11a49805 100644
--- a/packages/react/src/__tests__/ReactES6Class-test.js
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -12,6 +12,7 @@
 let PropTypes;
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let act;
 
 describe('ReactES6Class', () => {
@@ -29,9 +30,10 @@ describe('ReactES6Class', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     container = document.createElement('div');
-    root = ReactDOM.createRoot(container);
+    root = ReactDOMClient.createRoot(container);
     attachedListener = null;
     renderedName = null;
     Inner = class extends React.Component {
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 081be41e1bc88..18f5a4a3caa4c 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -11,13 +11,13 @@
 
 describe('ReactStrictMode', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let act;
 
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     act = require('jest-react').act;
 
@@ -51,7 +51,7 @@ describe('ReactStrictMode', () => {
     it('should default to not strict', () => {
       act(() => {
         const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         root.render(<Component label="A" />);
       });
 
@@ -66,7 +66,7 @@ describe('ReactStrictMode', () => {
       it('should support enabling strict mode via createRoot option', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container, {
+          const root = ReactDOMClient.createRoot(container, {
             unstable_strictMode: true,
           });
           root.render(<Component label="A" />);
@@ -87,7 +87,7 @@ describe('ReactStrictMode', () => {
       it('should include legacy + strict effects mode', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container);
+          const root = ReactDOMClient.createRoot(container);
           root.render(
             <React.StrictMode>
               <Component label="A" />
@@ -110,7 +110,7 @@ describe('ReactStrictMode', () => {
       it('should allow level to be increased with nesting', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container);
+          const root = ReactDOMClient.createRoot(container);
           root.render(
             <>
               <Component label="A" />
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 84fbead1f4926..81416f260ae90 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let PropTypes;
@@ -22,6 +23,7 @@ describe('ReactStrictMode', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
   });
 
@@ -361,6 +363,7 @@ describe('Concurrent Mode', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
   });
 
@@ -406,7 +409,7 @@ describe('Concurrent Mode', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<StrictRoot />);
     expect(() => Scheduler.unstable_flushAll()).toErrorDev(
       [
@@ -468,7 +471,7 @@ Please update the following components: App`,
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<StrictRoot />);
 
     expect(() => {
@@ -544,7 +547,7 @@ Please update the following components: Parent`,
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<StrictRoot foo={true} />);
     expect(() =>
       Scheduler.unstable_flushAll(),
@@ -623,6 +626,7 @@ describe('symbol checks', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
   });
 
   it('should switch from StrictMode to a Fragment and reset state', () => {
@@ -735,6 +739,7 @@ describe('string refs', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
   });
 
   it('should warn within a strict tree', () => {
@@ -820,6 +825,7 @@ describe('context legacy', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     PropTypes = require('prop-types');
   });
 
@@ -900,6 +906,7 @@ describe('context legacy', () => {
       jest.resetModules();
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
     });
 
     if (ReactFeatureFlags.consoleManagedByDevToolsDuringStrictMode) {
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
index d9456404bb5ed..8d53739d338cd 100644
--- a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -1,6 +1,7 @@
 /// <reference path="./testDefinitions/PropTypes.d.ts" />
 /// <reference path="./testDefinitions/React.d.ts" />
 /// <reference path="./testDefinitions/ReactDOM.d.ts" />
+/// <reference path="./testDefinitions/ReactDOMClient.d.ts" />
 /// <reference path="./testDefinitions/ReactInternalAct.d.ts" />
 
 /*!
@@ -12,6 +13,7 @@
 
 import React = require('react');
 import ReactDOM = require('react-dom');
+import ReactDOMClient = require('react-dom/client');
 import ReactDOMTestUtils = require('react-dom/test-utils');
 import PropTypes = require('prop-types');
 import internalAct = require('jest-react');
@@ -317,7 +319,7 @@ class ClassicRefs extends React.Component {
 describe('ReactTypeScriptClass', function() {
   beforeEach(function() {
     container = document.createElement('div');
-    root = ReactDOM.createRoot(container);
+    root = ReactDOMClient.createRoot(container);
     attachedListener = null;
     renderedName = null;
   });
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
index 1d0e883ab1621..90ee316124d95 100644
--- a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
@@ -13,7 +13,6 @@
  */
 
 declare module 'react-dom' {
-  export function createRoot(container : any) : any
   export function render(element : any, container : any) : any
   export function unmountComponentAtNode(container : any) : void
   export function findDOMNode(instance : any) : any
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts
new file mode 100644
index 0000000000000..a97ad21ce6a1c
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts
@@ -0,0 +1,18 @@
+/*!
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * TypeScript Definition File for React.
+ *
+ * Full type definitions are not yet officially supported. These are mostly
+ * just helpers for the unit test.
+ */
+
+declare module 'react-dom/client' {
+  export function createRoot(container : any, options?: any) : any
+  export function hydrateRoot(container : any, children: any, options?: any) : any
+}
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 2a628990049b6..5b0ce4f1a4afe 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -13,6 +13,7 @@ let useSyncExternalStore;
 let useSyncExternalStoreWithSelector;
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 let useState;
@@ -46,6 +47,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     useState = React.useState;
     useEffect = React.useEffect;
@@ -90,7 +92,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       // the correct behavior, despite the fact that the legacy root API
       // triggers a warning in 18), write a test that uses
       // createLegacyRoot directly.
-      return ReactDOM.createRoot(container);
+      return ReactDOMClient.createRoot(container);
     } else {
       ReactDOM.render(null, container);
       return {
@@ -745,7 +747,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
       if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
         act(() => {
-          ReactDOM.hydrateRoot(container, <App />);
+          ReactDOMClient.hydrateRoot(container, <App />);
         });
         expect(Scheduler).toHaveYielded([
           // First it hydrates the server rendered HTML
diff --git a/scripts/jest/typescript/preprocessor.js b/scripts/jest/typescript/preprocessor.js
index dbf910754f9b2..a4100be8aec43 100644
--- a/scripts/jest/typescript/preprocessor.js
+++ b/scripts/jest/typescript/preprocessor.js
@@ -42,7 +42,7 @@ function compile(content, contentFilename) {
       let source;
       const libRegex = /lib\.(.+\.)?d\.ts$/;
       const jestRegex = /jest\.d\.ts/;
-      const reactRegex = /(?:React|ReactDOM|ReactInternalAct|PropTypes)(?:\.d)?\.ts$/;
+      const reactRegex = /(?:React|ReactDOM|ReactDOMClient|ReactInternalAct|PropTypes)(?:\.d)?\.ts$/;
 
       // `path.normalize` is used to turn forward slashes in
       // the file path into backslashes on Windows.
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index b2b9639505a7b..4e47b4fd6ffcb 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -18,12 +18,17 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/writer.node.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
       'react-interactions',
     ],
     isFlowTyped: true,
@@ -40,12 +45,17 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
     ],
     isFlowTyped: true,
     isServerSupported: true,