From 05bf01d0aec02cc55ab6e71d64bb3a2ee0cb33ee Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Fri, 6 Jan 2023 18:38:09 +0000
Subject: [PATCH] [Beta] Add missing imports to ref pages (#5442)

* [Beta] Add missing imports to ref pages

* Fix spaces
---
 .../reference/react-dom/client/hydrateRoot.md        |  2 ++
 .../content/reference/react-dom/components/common.md |  6 ++++++
 .../content/reference/react-dom/components/option.md |  2 ++
 .../reference/react-dom/components/progress.md       |  2 ++
 beta/src/content/reference/react-dom/findDOMNode.md  |  4 +++-
 beta/src/content/reference/react-dom/flushSync.md    | 10 ++++++----
 beta/src/content/reference/react-dom/hydrate.md      |  2 ++
 beta/src/content/reference/react-dom/render.md       |  2 ++
 .../reference/react-dom/server/renderToNodeStream.md |  4 ++++
 .../react-dom/server/renderToPipeableStream.md       |  2 ++
 .../react-dom/server/renderToReadableStream.md       |  2 ++
 .../react-dom/server/renderToStaticMarkup.md         |  6 +++++-
 .../react-dom/server/renderToStaticNodeStream.md     |  4 ++++
 .../reference/react-dom/server/renderToString.md     |  6 +++++-
 .../reference/react-dom/unmountComponentAtNode.md    |  2 ++
 beta/src/content/reference/react/createContext.md    |  2 ++
 beta/src/content/reference/react/createFactory.md    |  2 ++
 beta/src/content/reference/react/createRef.md        |  2 ++
 beta/src/content/reference/react/forwardRef.md       |  3 ++-
 beta/src/content/reference/react/lazy.md             |  4 ++++
 beta/src/content/reference/react/memo.md             |  2 ++
 beta/src/content/reference/react/startTransition.md  |  2 ++
 .../content/reference/react/useInsertionEffect.md    | 12 ++++++------
 beta/src/content/reference/react/useRef.md           |  2 +-
 24 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/beta/src/content/reference/react-dom/client/hydrateRoot.md b/beta/src/content/reference/react-dom/client/hydrateRoot.md
index 3602159a..bff1a17f 100644
--- a/beta/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/beta/src/content/reference/react-dom/client/hydrateRoot.md
@@ -23,6 +23,8 @@ const root = hydrateRoot(domNode, reactNode, options?)
 Call `hydrateRoot` to “attach” React to existing HTML that was already rendered by React in a server environment.
 
 ```js
+import { hydrateRoot } from 'react-dom/client';
+
 const domNode = document.getElementById('root');
 const root = hydrateRoot(domNode, reactNode);
 ```
diff --git a/beta/src/content/reference/react-dom/components/common.md b/beta/src/content/reference/react-dom/components/common.md
index 3d15f28e..d640248c 100644
--- a/beta/src/content/reference/react-dom/components/common.md
+++ b/beta/src/content/reference/react-dom/components/common.md
@@ -16,6 +16,12 @@ All built-in browser components, such as [`<div>`](https://developer.mozilla.org
 
 ### Common components (e.g. `<div>`) {/*common*/}
 
+```js
+<div className="wrapper">Some content</div>
+```
+
+[See more examples below.](#usage)
+
 #### Props {/*common-props*/}
 
 These special React props are supported for all built-in components:
diff --git a/beta/src/content/reference/react-dom/components/option.md b/beta/src/content/reference/react-dom/components/option.md
index 13b533b9..be1db0d6 100644
--- a/beta/src/content/reference/react-dom/components/option.md
+++ b/beta/src/content/reference/react-dom/components/option.md
@@ -32,6 +32,8 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
 </select>
 ```
 
+[See more examples below.](#usage)
+
 #### Props {/*props*/}
 
 `<option>` supports all [common element props.](/reference/react-dom/components/common#props)
diff --git a/beta/src/content/reference/react-dom/components/progress.md b/beta/src/content/reference/react-dom/components/progress.md
index 4459c8fe..fd6c96a1 100644
--- a/beta/src/content/reference/react-dom/components/progress.md
+++ b/beta/src/content/reference/react-dom/components/progress.md
@@ -26,6 +26,8 @@ To display a progress indicator, render the [built-in browser `<progress>`](http
 <progress value={0.5} />
 ```
 
+[See more examples below.](#usage)
+
 #### Props {/*props*/}
 
 `<progress>` supports all [common element props.](/reference/react-dom/components/common#props)
diff --git a/beta/src/content/reference/react-dom/findDOMNode.md b/beta/src/content/reference/react-dom/findDOMNode.md
index 7b3fab55..df3057f5 100644
--- a/beta/src/content/reference/react-dom/findDOMNode.md
+++ b/beta/src/content/reference/react-dom/findDOMNode.md
@@ -12,7 +12,7 @@ This API will be removed in a future major version of React. [See the alternativ
 
 `findDOMNode` finds the browser DOM node for a React [class component](/reference/react/Component) instance.
 
-```
+```js
 const domNode = findDOMNode(componentInstance)
 ```
 
@@ -29,6 +29,8 @@ const domNode = findDOMNode(componentInstance)
 Call `findDOMNode` to find the browser DOM node for a given React [class component](/reference/react/Component) instance.
 
 ```js
+import { findDOMNode } from 'react-dom';
+
 const domNode = findDOMNode(componentInstance);
 ```
 
diff --git a/beta/src/content/reference/react-dom/flushSync.md b/beta/src/content/reference/react-dom/flushSync.md
index 51ecd8b6..cb0d9594 100644
--- a/beta/src/content/reference/react-dom/flushSync.md
+++ b/beta/src/content/reference/react-dom/flushSync.md
@@ -29,8 +29,10 @@ flushSync(callback)
 Call `flushSync` to force React to flush any pending work and update the DOM synchronously.
 
 ```js
+import { flushSync } from 'react-dom';
+
 flushSync(() => {
-  setState(true);
+  setSomething(123);
 });
 ```
 
@@ -62,9 +64,9 @@ Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort.
 
 When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use `flushSync` to force React to flush any <CodeStep step={1}>state updates</CodeStep> inside the callback synchronously:
 
-```js [[1, 2, "setState(true)"]]
+```js [[1, 2, "setSomething(123)"]]
 flushSync(() => {
-  setState(true);
+  setSomething(123);
 });
 // By this line, the DOM is updated.
 ```
@@ -85,7 +87,7 @@ In the example below, you use `flushSync` inside of the `onbeforeprint` callback
 
 ```js App.js active
 import { useState, useEffect } from 'react';
-import {flushSync} from 'react-dom';
+import { flushSync } from 'react-dom';
 
 export default function PrintApp() {
   const [isPrinting, setIsPrinting] = useState(false);
diff --git a/beta/src/content/reference/react-dom/hydrate.md b/beta/src/content/reference/react-dom/hydrate.md
index 660a1328..6e590f75 100644
--- a/beta/src/content/reference/react-dom/hydrate.md
+++ b/beta/src/content/reference/react-dom/hydrate.md
@@ -31,6 +31,8 @@ hydrate(reactNode, domNode, callback?)
 Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment.
 
 ```js
+import { hydrate } from 'react-dom';
+
 hydrate(reactNode, domNode);
 ```
 
diff --git a/beta/src/content/reference/react-dom/render.md b/beta/src/content/reference/react-dom/render.md
index a91b2a92..15cf970a 100644
--- a/beta/src/content/reference/react-dom/render.md
+++ b/beta/src/content/reference/react-dom/render.md
@@ -31,6 +31,8 @@ render(reactNode, domNode, callback?)
 Call `render` to display a React component inside a browser DOM element.
 
 ```js
+import { render } from 'react-dom';
+
 const domNode = document.getElementById('root');
 render(<App />, domNode);
 ```
diff --git a/beta/src/content/reference/react-dom/server/renderToNodeStream.md b/beta/src/content/reference/react-dom/server/renderToNodeStream.md
index b4414ad0..a4ab2e57 100644
--- a/beta/src/content/reference/react-dom/server/renderToNodeStream.md
+++ b/beta/src/content/reference/react-dom/server/renderToNodeStream.md
@@ -29,12 +29,16 @@ const stream = renderToNodeStream(reactNode)
 On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response.
 
 ```js
+import { renderToNodeStream } from 'react-dom/server';
+
 const stream = renderToNodeStream(<App />);
 stream.pipe(response);
 ```
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`.
diff --git a/beta/src/content/reference/react-dom/server/renderToPipeableStream.md b/beta/src/content/reference/react-dom/server/renderToPipeableStream.md
index ead4f321..06426734 100644
--- a/beta/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/beta/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -42,6 +42,8 @@ const { pipe } = renderToPipeableStream(<App />, {
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
diff --git a/beta/src/content/reference/react-dom/server/renderToReadableStream.md b/beta/src/content/reference/react-dom/server/renderToReadableStream.md
index a1d8d724..37025ba2 100644
--- a/beta/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/beta/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -43,6 +43,8 @@ async function handler(request) {
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
diff --git a/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md b/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md
index 85fb2340..01ff17ee 100644
--- a/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md
+++ b/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md
@@ -22,12 +22,16 @@ const html = renderToStaticMarkup(reactNode)
 
 On the server, call `renderToStaticMarkup` to render your app to HTML.
 
-```js {3-4}
+```js
+import { renderToStaticMarkup } from 'react-dom/server';
+
 const html = renderToStaticMarkup(<Page />);
 ```
 
 It will produce non-interactive HTML output of your React components.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<Page />`.
diff --git a/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md
index 3446aa0f..ec3d5893 100644
--- a/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md
+++ b/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md
@@ -23,10 +23,14 @@ const stream = renderToStaticNodeStream(reactNode)
 On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams).
 
 ```js
+import { renderToStaticNodeStream } from 'react-dom/server';
+
 const stream = renderToStaticNodeStream(<Page />);
 stream.pipe(response);
 ```
 
+[See more examples below.](#usage)
+
 The stream will produce non-interactive HTML output of your React components.
 
 #### Parameters {/*parameters*/}
diff --git a/beta/src/content/reference/react-dom/server/renderToString.md b/beta/src/content/reference/react-dom/server/renderToString.md
index 04ce0271..97079376 100644
--- a/beta/src/content/reference/react-dom/server/renderToString.md
+++ b/beta/src/content/reference/react-dom/server/renderToString.md
@@ -28,12 +28,16 @@ const html = renderToString(reactNode)
 
 On the server, call `renderToString` to render your app to HTML.
 
-```js {3-4}
+```js
+import { renderToString } from 'react-dom/server';
+
 const html = renderToString(<App />);
 ```
 
 On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`.
diff --git a/beta/src/content/reference/react-dom/unmountComponentAtNode.md b/beta/src/content/reference/react-dom/unmountComponentAtNode.md
index 7fbb7648..008943bd 100644
--- a/beta/src/content/reference/react-dom/unmountComponentAtNode.md
+++ b/beta/src/content/reference/react-dom/unmountComponentAtNode.md
@@ -31,6 +31,8 @@ unmountComponentAtNode(domNode)
 Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
 
 ```js
+import { unmountComponentAtNode } from 'react-dom';
+
 const domNode = document.getElementById('root');
 render(<App />, domNode);
 
diff --git a/beta/src/content/reference/react/createContext.md b/beta/src/content/reference/react/createContext.md
index 0e1c17e8..4d719ac5 100644
--- a/beta/src/content/reference/react/createContext.md
+++ b/beta/src/content/reference/react/createContext.md
@@ -28,6 +28,8 @@ import { createContext } from 'react';
 const ThemeContext = createContext('light');
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time.
diff --git a/beta/src/content/reference/react/createFactory.md b/beta/src/content/reference/react/createFactory.md
index a5ddc177..eb851ad9 100644
--- a/beta/src/content/reference/react/createFactory.md
+++ b/beta/src/content/reference/react/createFactory.md
@@ -46,6 +46,8 @@ export default function App() {
 }
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/reference/react/Fragment)).
diff --git a/beta/src/content/reference/react/createRef.md b/beta/src/content/reference/react/createRef.md
index b9e85bd3..7974659d 100644
--- a/beta/src/content/reference/react/createRef.md
+++ b/beta/src/content/reference/react/createRef.md
@@ -40,6 +40,8 @@ class MyComponent extends Component {
   // ...
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 `createRef` takes no parameters.
diff --git a/beta/src/content/reference/react/forwardRef.md b/beta/src/content/reference/react/forwardRef.md
index 68a7f5cb..66dd90e4 100644
--- a/beta/src/content/reference/react/forwardRef.md
+++ b/beta/src/content/reference/react/forwardRef.md
@@ -28,9 +28,10 @@ import { forwardRef } from 'react';
 const MyInput = forwardRef(function MyInput(props, ref) {
   // ...
 });
-
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.
diff --git a/beta/src/content/reference/react/lazy.md b/beta/src/content/reference/react/lazy.md
index 91408986..cd285047 100644
--- a/beta/src/content/reference/react/lazy.md
+++ b/beta/src/content/reference/react/lazy.md
@@ -23,9 +23,13 @@ const SomeComponent = lazy(load)
 Call `lazy` outside your components to declare a lazy-loaded React component:
 
 ```js
+import { lazy } from 'react';
+
 const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason to let the closest Error Boundary above handle it.
diff --git a/beta/src/content/reference/react/memo.md b/beta/src/content/reference/react/memo.md
index 75cc6175..25f656f6 100644
--- a/beta/src/content/reference/react/memo.md
+++ b/beta/src/content/reference/react/memo.md
@@ -30,6 +30,8 @@ const SomeComponent = memo(function SomeComponent(props) {
 });
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `Component`: The component that you want to memoize. The `memo` does not modify this component, but returns a new, memoized component instead. Any valid React component, including functions and [`forwardRef`](/reference/react/forwardRef) components, is accepted.
diff --git a/beta/src/content/reference/react/startTransition.md b/beta/src/content/reference/react/startTransition.md
index efff24e3..32fef7a9 100644
--- a/beta/src/content/reference/react/startTransition.md
+++ b/beta/src/content/reference/react/startTransition.md
@@ -37,6 +37,8 @@ function TabContainer() {
 }
 ```
 
+[See more examples below.](#usage)
+
 #### Parameters {/*parameters*/}
 
 * `scope`: A function that updates some state by calling one or more [`set` functions.](/reference/react/useState#setstate) React immediately calls `scope` with no parameters and marks all state updates scheduled synchronously during the `scope` function call as transitions. They will be [non-blocking](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) and [will not display unwanted loading indicators.](/reference/react/useTransition#preventing-unwanted-loading-indicators)
diff --git a/beta/src/content/reference/react/useInsertionEffect.md b/beta/src/content/reference/react/useInsertionEffect.md
index 7930479d..43b31a12 100644
--- a/beta/src/content/reference/react/useInsertionEffect.md
+++ b/beta/src/content/reference/react/useInsertionEffect.md
@@ -29,17 +29,17 @@ useInsertionEffect(setup, dependencies?)
 Call `useInsertionEffect` to insert the styles before any DOM mutations:
 
 ```js
+import { useInsertionEffect } from 'react';
+
+// Inside your CSS-in-JS library
 function useCSS(rule) {
   useInsertionEffect(() => {
-  	// As explained earlier, we don't recommend runtime injection of <style> tags.
-  	// But if you have to do it, then it's important to do in useInsertionEffect.
-  	// ... inject <style> tags here ...
+    // ... inject <style> tags here ...
   });
   return rule;
 }
 ```
 
-
 [See more examples below.](#usage)
 
 #### Parameters {/*parameters*/}
@@ -94,8 +94,8 @@ Call `useInsertionEffect` to insert the styles before any DOM mutations:
 let isInserted = new Set();
 function useCSS(rule) {
   useInsertionEffect(() => {
-  	// As explained earlier, we don't recommend runtime injection of <style> tags.
-  	// But if you have to do it, then it's important to do in useInsertionEffect.
+    // As explained earlier, we don't recommend runtime injection of <style> tags.
+    // But if you have to do it, then it's important to do in useInsertionEffect.
     if (!isInserted.has(rule)) {
       isInserted.add(rule);
       document.head.appendChild(getStyleForRule(rule));
diff --git a/beta/src/content/reference/react/useRef.md b/beta/src/content/reference/react/useRef.md
index 0f33ad8f..af4371b3 100644
--- a/beta/src/content/reference/react/useRef.md
+++ b/beta/src/content/reference/react/useRef.md
@@ -31,7 +31,7 @@ function MyComponent() {
   // ...
 ```
 
-See examples of [referencing values](#examples-value) and [DOM manipulation.](#examples-dom)
+[See more examples below.](#usage)
 
 #### Parameters {/*parameters*/}