diff --git a/beta/src/content/reference/react-dom/client/hydrateRoot.md b/beta/src/content/reference/react-dom/client/hydrateRoot.md
index 3602159a8..bff1a17f9 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 3d15f28e2..d640248c8 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 [`
`](https://developer.mozilla.org
### Common components (e.g. `
`) {/*common*/}
+```js
+
Some content
+```
+
+[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 13b533b9a..be1db0d61 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 `
` component](https://developer.mozilla.org/en-US/
```
+[See more examples below.](#usage)
+
#### Props {/*props*/}
` ` 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 4459c8fe7..fd6c96a1e 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 ``](http
```
+[See more examples below.](#usage)
+
#### Props {/*props*/}
`` 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 7b3fab556..df3057f5b 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 51ecd8b6c..cb0d9594d 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 state updates 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 660a13289..6e590f75e 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 a91b2a927..15cf970a3 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( , domNode);
```
diff --git a/beta/src/content/reference/react-dom/server/renderToNodeStream.md b/beta/src/content/reference/react-dom/server/renderToNodeStream.md
index b4414ad02..a4ab2e570 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( );
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 ` `.
diff --git a/beta/src/content/reference/react-dom/server/renderToPipeableStream.md b/beta/src/content/reference/react-dom/server/renderToPipeableStream.md
index ead4f3216..06426734c 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( , {
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 ` `. It is expected to represent the entire document, so the `App` component should render the `` tag.
diff --git a/beta/src/content/reference/react-dom/server/renderToReadableStream.md b/beta/src/content/reference/react-dom/server/renderToReadableStream.md
index a1d8d7244..37025ba20 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 ` `. It is expected to represent the entire document, so the `App` component should render the `` tag.
diff --git a/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md b/beta/src/content/reference/react-dom/server/renderToStaticMarkup.md
index 85fb2340e..01ff17ee6 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( );
```
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 ` `.
diff --git a/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/beta/src/content/reference/react-dom/server/renderToStaticNodeStream.md
index 3446aa0ff..ec3d58937 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( );
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 04ce02710..970793763 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( );
```
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 ` `.
diff --git a/beta/src/content/reference/react-dom/unmountComponentAtNode.md b/beta/src/content/reference/react-dom/unmountComponentAtNode.md
index 7fbb76487..008943bd5 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( , domNode);
diff --git a/beta/src/content/reference/react/createContext.md b/beta/src/content/reference/react/createContext.md
index 0e1c17e8e..4d719ac59 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 a5ddc1774..eb851ad97 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 b9e85bd3c..7974659dc 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 68a7f5cb6..66dd90e42 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 914089861..cd2850472 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 75cc61758..25f656f6b 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 efff24e3b..32fef7a97 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 7930479d0..43b31a122 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