[18] Update ReactDOMClient docs

beta/src/pages/apis/reactdom.md

@@ -22,10 +22,10 @@ npm install react-dom
 
 ```js
 // Importing a specific API:
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 // Importing all APIs together:
-import * as ReactDOM from 'react';
+import * as ReactDOMClient from 'react-dom/client';
 ```
 
 </PackageImport>

content/docs/reference-react-dom.md

@@ -1,16 +1,16 @@
 ---
 id: react-dom
-title: ReactDOM
+title: ReactDOMClient
 layout: docs
 category: Reference
 permalink: docs/react-dom.html
 ---
 
-If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import ReactDOM from 'react-dom'`. If you use ES5 with npm, you can write `var ReactDOM = require('react-dom')`.
+If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import * as ReactDOMClient from 'react-dom/client'`. If you use ES5 with npm, you can write `var ReactDOMClient = require('react-dom/client')`.
 
 ## Overview {#overview}
 
-The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.
+The `react-dom/client` package provides DOM client-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to. Most of your components should not need to use this module.
 
 - [`createRoot()`](#createroot)
 - [`hydrateRoot()`](#hydrateroot)
@@ -37,13 +37,13 @@ React supports all popular browsers, including Internet Explorer 9 and above, al
 ### `createRoot()` {#createroot}
 
 ```javascript
-ReactDOM.createRoot(container[, options]);
+ReactDOMClient.createRoot(container[, options]);
 ```
 
 Create a React root for the supplied `container` and return the root. The root can be used to render a React element into the DOM with `render`:
 
 ```javascript
-const root = ReactDOM.createRoot(container);
+const root = ReactDOMClient.createRoot(container);
 root.render(element);
 ```
 
@@ -55,25 +55,25 @@ root.unmount();
 
 > Note:
 >
-> `ReactDOM.createRoot()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when render is called. Later calls use React’s DOM diffing algorithm for efficient updates.
+> `createRoot()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when render is called. Later calls use React’s DOM diffing algorithm for efficient updates.
 >
-> `ReactDOM.createRoot()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
+> `createRoot()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
 >
-> Using `ReactDOM.createRoot()` to hydrate a server-rendered container is not supported. Use [`hydrateRoot()`](#hydrateroot) instead.
+> Using `createRoot()` to hydrate a server-rendered container is not supported. Use [`hydrateRoot()`](#hydrateroot) instead.
 
 * * *
 
 ### `hydrateRoot()` {#hydrateroot}
 
 ```javascript
-ReactDOM.hydrateRoot(element, container[, options])
+ReactDOMClient.hydrateRoot(element, container[, options])
 ```
 
 Same as [`createRoot()`](#createroot), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
 
-`hydrateRoot` accepts two optional callbacks as options:
-- `onDeleted`: callback called when content is deleted.
-- `onHydrated`: callback called after hydration completes.
+`hydrateRoot` accepts two options:
+- `onRecoverableError`: optional callback called when React automatically recovers from errors during hydration.
+- `identifierPrefix`: optional prefix React uses for ids generated by `React.useId`. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server.
 
 
 > Note
@@ -85,14 +85,14 @@ Same as [`createRoot()`](#createroot), but is used to hydrate a container whose
 ### `createPortal()` {#createportal}
 
 ```javascript
-ReactDOM.createPortal(child, container)
+ReactDOMClient.createPortal(child, container)
 ```
 
 Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
 ## Legacy Reference
 ### `render()` {#render}
 ```javascript
-ReactDOM.render(element, container[, callback])
+ReactDOMClient.render(element, container[, callback])
 ```
 
 Render a React element into the DOM in the supplied `container` and return a [reference](/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/docs/components-and-props.html#function-and-class-components)).
@@ -103,22 +103,22 @@ If the optional callback is provided, it will be executed after the component is
 
 > Note:
 >
-> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
+> `render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
 >
-> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
+> `render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
 >
-> `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
+> `render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
 > and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a
 > [callback ref](/docs/refs-and-the-dom.html#callback-refs) to the root element.
 >
-> Using `ReactDOM.render()` to hydrate a server-rendered container is deprecated. Use [`hydrateRoot()`](#hydrateroot) instead.
+> Using `render()` to hydrate a server-rendered container is deprecated. Use [`hydrateRoot()`](#hydrateroot) instead.
 
 * * *
 
 ### `hydrate()` {#hydrate}
 
 ```javascript
-ReactDOM.hydrate(element, container[, callback])
+ReactDOMClient.hydrate(element, container[, callback])
 ```
 
 Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
@@ -136,7 +136,7 @@ Remember to be mindful of user experience on slow connections. The JavaScript co
 ### `unmountComponentAtNode()` {#unmountcomponentatnode}
 
 ```javascript
-ReactDOM.unmountComponentAtNode(container)
+ReactDOMClient.unmountComponentAtNode(container)
 ```
 
 Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
@@ -150,7 +150,7 @@ Remove a mounted React component from the DOM and clean up its event handlers an
 > `findDOMNode` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. [It has been deprecated in `StrictMode`.](/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
 
 ```javascript
-ReactDOM.findDOMNode(component)
+ReactDOMClient.findDOMNode(component)
 ```
 If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.**