[beta] Add unmountComponentAtNode (#5328)

* [beta] Add unmountComponentAtNode

* Feedback

* edits and harsher deprecations

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

beta/src/content/apis/react-dom/hydrate.md

@@ -1,11 +1,14 @@
 ---
 title: hydrate
 ---
-<Pitfall>
+
+<Deprecated>
 
 In React 18, `hydrate` was replaced by [`hydrateRoot`.](/apis/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
 
-</Pitfall>
+This API will be removed in a future major version of React.
+
+</Deprecated>
 
 <Intro>
 
@@ -163,12 +166,18 @@ Remember to be mindful of user experience on slow connections. The JavaScript co
 
 </Pitfall>
 
-
-
 ## Reference {/*reference*/}
 
 ### `hydrate(reactNode, domNode, callback?)` {/*hydrate-root*/}
 
+<Deprecated>
+
+In React 18, `hydrate` was replaced by [`hydrateRoot`.](/apis/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
+
+This API will be removed in a future major version of React.
+
+</Deprecated>
+
 Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
 
 ```js

beta/src/content/apis/react-dom/render.md

@@ -2,12 +2,13 @@
 title: render
 ---
 
-<Pitfall>
+<Deprecated>
 
 In React 18, `render` was replaced by [`createRoot`.](/apis/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
 
-</Pitfall>
+This API will be removed in a future major version of React.
 
+</Deprecated>
 
 <Intro>
 
@@ -178,6 +179,14 @@ It is uncommon to call `render` multiple times. Usually, you'll [update state](/
 
 ### `render(reactNode, domNode, callback?)` {/*render*/}
 
+<Deprecated>
+
+In React 18, `render` was replaced by [`createRoot`.](/apis/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
+
+This API will be removed in a future major version of React.
+
+</Deprecated>
+
 Call `render` to display a React component inside a browser DOM element.
 
 ```js

beta/src/content/apis/react-dom/unmountComponentAtNode.md

@@ -2,21 +2,118 @@
 title: unmountComponentAtNode
 ---
 
-<Wip>
+<Deprecated>
 
-This section is incomplete, please see the old docs for [unmountComponentAtNode.](https://reactjs.org/docs/react-dom.html#unmountcomponentatnode)
+In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/apis/react-dom/client/createRoot#root-unmount).
 
-</Wip>
+This API will be removed in a future major version of React.
 
+</Deprecated>
 
 <Intro>
 
-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.
+`unmountComponentAtNode` removes a mounted React component from the DOM.
 
 ```js
-unmountComponentAtNode(container)
+unmountComponentAtNode(domNode)
 ```
 
 </Intro>
 
 <InlineToc />
+
+---
+
+## Usage {/*usage*/}
+
+Call `unmountComponentAtNode` to remove a <CodeStep step={1}>mounted React component</CodeStep> from a <CodeStep step={2}>browser DOM node</CodeStep> and clean up its event handlers and state.
+
+```js [[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, "rootNode"]]
+import {render, unmountComponentAtNode} from 'react-dom';
+import App from './App.js';
+
+const rootNode = document.getElementById('root');
+render(<App />, rootNode);
+
+// ...
+unmountComponentAtNode(rootNode);
+````
+
+
+### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
+
+Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.
+
+In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it:
+
+<Sandpack>
+
+```html index.html
+<!DOCTYPE html>
+<html>
+  <head><title>My app</title></head>
+  <body>
+    <button id='render'>Render React App</button>
+    <button id='unmount'>Unmount React App</button>
+    <!-- This is the React App node -->
+    <div id='root'></div>
+  </body>
+</html>
+```
+
+```js index.js active
+import './styles.css';
+import {render, unmountComponentAtNode} from 'react-dom';
+import App from './App.js';
+
+const domNode = document.getElementById('root');
+
+document.getElementById('render').addEventListener('click', () => {
+  render(<App />, domNode);
+});
+
+document.getElementById('unmount').addEventListener('click', () => {
+  unmountComponentAtNode(domNode);
+});
+```
+
+```js App.js
+export default function App() {
+  return <h1>Hello, world!</h1>;
+}
+```
+
+</Sandpack>
+
+---
+
+## Reference {/*reference*/}
+
+### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}
+
+<Deprecated>
+
+In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/apis/react-dom/client/createRoot#root-unmount).
+
+This API will be removed in a future major version of React.
+
+</Deprecated>
+
+Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
+
+```js
+const domNode = document.getElementById('root');
+render(<App />, domNode);
+
+unmountComponentAtNode(domNode);
+```
+
+[See examples above.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
+
+#### Returns {/*returns*/}
+
+`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.

beta/src/sidebarAPIs.json

@@ -148,8 +148,7 @@
             },
             {
               "title": "unmountComponentAtNode",
-              "path": "/apis/react-dom/unmountComponentAtNode",
-              "wip": true
+              "path": "/apis/react-dom/unmountComponentAtNode"
             }
           ]
         },