fix: Use new react-dom/client entrypoint

Author: eps1lon

package.json

@@ -69,6 +69,12 @@
       "react/no-adjacent-inline-elements": "off",
       "import/no-unassigned-import": "off",
       "import/named": "off",
+      "import/no-unresolved": [
+        "error",
+        {
+          "ignore": "react-dom/client"
+        }
+      ],
       "testing-library/no-container": "off",
       "testing-library/no-dom-import": "off",
       "testing-library/no-unnecessary-act": "off",

src/__tests__/render.js

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
+import ReactDOMClient from 'react-dom/client'
 import ReactDOMServer from 'react-dom/server'
 import {fireEvent, render, screen} from '../'
 
@@ -110,7 +111,7 @@ test('flushes useEffect cleanup functions sync on unmount()', () => {
 })
 
 test('throws if `legacyRoot: false` is used with an incomaptible version', () => {
-  const isConcurrentReact = typeof ReactDOM.createRoot === 'function'
+  const isConcurrentReact = typeof ReactDOMClient.createRoot === 'function'
 
   const performConcurrentRender = () => render(<div />, {legacyRoot: false})
 

src/pure.js

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
+import * as ReactDOMClient from 'react-dom/client'
 import {
   getQueriesForElement,
   prettyDOM,
@@ -64,21 +65,21 @@ function createConcurrentRoot(
   container,
   {hydrate, ui, wrapper: WrapperComponent},
 ) {
-  if (typeof ReactDOM.createRoot !== 'function') {
+  if (typeof ReactDOMClient.createRoot !== 'function') {
     throw new TypeError(
       `Attempted to use concurrent React with \`react-dom@${ReactDOM.version}\`. Be sure to use the \`next\` or \`experimental\` release channel (https://reactjs.org/docs/release-channels.html).'`,
     )
   }
   let root
   if (hydrate) {
     act(() => {
-      root = ReactDOM.hydrateRoot(
+      root = ReactDOMClient.hydrateRoot(
         container,
         WrapperComponent ? React.createElement(WrapperComponent, null, ui) : ui,
       )
     })
   } else {
-    root = ReactDOM.createRoot(container)
+    root = ReactDOMClient.createRoot(container)
   }
 
   return {
@@ -175,7 +176,7 @@ function render(
   {
     container,
     baseElement = container,
-    legacyRoot = typeof ReactDOM.createRoot !== 'function',
+    legacyRoot = typeof ReactDOMClient.createRoot !== 'function',
     queries,
     hydrate = false,
     wrapper,