+ );
+}
+
+export default AddedInVersion;
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index 8344f97701e..39477be008f 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -30,6 +30,7 @@ import ButtonLink from 'components/ButtonLink';
import {TocContext} from './TocContext';
import type {Toc, TocItem} from './TocContext';
import {TeamMember} from './TeamMember';
+import AddedInVersion from './AddedInVersion';
function CodeStep({children, step}: {children: any; step: number}) {
return (
@@ -416,6 +417,7 @@ export const MDXComponents = {
Illustration,
IllustrationBlock,
Intro,
+ AddedInVersion,
InlineToc,
LearnMore,
Math,
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index d91bc20c6d3..be1263a39cf 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -2,6 +2,8 @@
title: createRoot
---
+
+
`createRoot` lets you create a root to display React components inside a browser DOM node.
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index cf77a81ac60..89b050b9c71 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -2,6 +2,8 @@
title: hydrateRoot
---
+
+
`hydrateRoot` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`.](/reference/react-dom/server)
diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md
index 006f78a9aa3..6a824691088 100644
--- a/src/content/reference/react-dom/createPortal.md
+++ b/src/content/reference/react-dom/createPortal.md
@@ -2,6 +2,8 @@
title: createPortal
---
+
+
`createPortal` lets you render some children into a different part of the DOM.
diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md
index 75c02c73daf..6f8090884ca 100644
--- a/src/content/reference/react-dom/findDOMNode.md
+++ b/src/content/reference/react-dom/findDOMNode.md
@@ -2,6 +2,8 @@
title: findDOMNode
---
+
+
This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md
index 7b40a7389c2..15acd530740 100644
--- a/src/content/reference/react-dom/flushSync.md
+++ b/src/content/reference/react-dom/flushSync.md
@@ -2,6 +2,10 @@
title: flushSync
---
+
+
+{/* According to the linked answer from Dan Abramov, this was supposed to be released during v16, but is only officially documented in v18.0.0 --> https://github.com/facebook/react/issues/11527#issuecomment-360199710 */}
+
Using `flushSync` is uncommon and can hurt the performance of your app.
diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md
index 639c7ab25b7..ab926859ff2 100644
--- a/src/content/reference/react-dom/hydrate.md
+++ b/src/content/reference/react-dom/hydrate.md
@@ -2,6 +2,8 @@
title: hydrate
---
+
+
This API will be removed in a future major version of React.
diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md
index a0f751278e4..7036908c588 100644
--- a/src/content/reference/react-dom/render.md
+++ b/src/content/reference/react-dom/render.md
@@ -2,6 +2,8 @@
title: render
---
+
+
This API will be removed in a future major version of React.
diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md
index a4ab2e570f8..a111d74ddf8 100644
--- a/src/content/reference/react-dom/server/renderToNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToNodeStream.md
@@ -2,6 +2,8 @@
title: renderToNodeStream
---
+
+
This API will be removed in a future major version of React. Use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead.
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 6a9021e022d..5db75ce9f28 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -2,6 +2,8 @@
title: renderToPipeableStream
---
+
+
`renderToPipeableStream` renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html)
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index 8ef42aa71cf..cbe9871df8c 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -2,6 +2,8 @@
title: renderToReadableStream
---
+
+
`renderToReadableStream` renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md
index 01ff17ee637..a507d5b900b 100644
--- a/src/content/reference/react-dom/server/renderToStaticMarkup.md
+++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md
@@ -2,6 +2,8 @@
title: renderToStaticMarkup
---
+
+
`renderToStaticMarkup` renders a non-interactive React tree to an HTML string.
diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
index ec3d58937bc..ed5c7ac32d5 100644
--- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
@@ -2,6 +2,8 @@
title: renderToStaticNodeStream
---
+
+
`renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md
index 41bc6a98283..d6c9cdecae5 100644
--- a/src/content/reference/react-dom/server/renderToString.md
+++ b/src/content/reference/react-dom/server/renderToString.md
@@ -2,6 +2,8 @@
title: renderToString
---
+
+
`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives)
diff --git a/src/content/reference/react-dom/unmountComponentAtNode.md b/src/content/reference/react-dom/unmountComponentAtNode.md
index 12f11dc74da..8b74f80b9b1 100644
--- a/src/content/reference/react-dom/unmountComponentAtNode.md
+++ b/src/content/reference/react-dom/unmountComponentAtNode.md
@@ -2,6 +2,8 @@
title: unmountComponentAtNode
---
+
+
This API will be removed in a future major version of React.
diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md
index 3683cb7ccaa..89640b62998 100644
--- a/src/content/reference/react/Children.md
+++ b/src/content/reference/react/Children.md
@@ -2,6 +2,10 @@
title: Children
---
+
+
+{/* Does not show up in changelogs but only appears in v0.10.0 docs based on https://web.archive.org/ research */}
+
Using `Children` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives)
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 6174cd753a8..25ef7f66f2a 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -2,6 +2,8 @@
title: Component
---
+
+
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md
index aa72b08a0ba..a412dc7376e 100644
--- a/src/content/reference/react/Fragment.md
+++ b/src/content/reference/react/Fragment.md
@@ -2,6 +2,8 @@
title: (<>...>)
---
+
+
``, often used via `<>...>` syntax, lets you group elements without a wrapper node.
diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md
index 8e149634aee..1ebec52dcab 100644
--- a/src/content/reference/react/Profiler.md
+++ b/src/content/reference/react/Profiler.md
@@ -2,6 +2,8 @@
title:
---
+
+
`` lets you measure rendering performance of a React tree programmatically.
diff --git a/src/content/reference/react/PureComponent.md b/src/content/reference/react/PureComponent.md
index 3e2d074e10d..2281c5e1e48 100644
--- a/src/content/reference/react/PureComponent.md
+++ b/src/content/reference/react/PureComponent.md
@@ -2,6 +2,8 @@
title: PureComponent
---
+
+
We recommend defining components as functions instead of classes. [See how to migrate.](#alternatives)
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index b7ca2227c5f..59d26b1d118 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -2,6 +2,7 @@
title:
---
+
diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md
index dd931205581..1a2f174224e 100644
--- a/src/content/reference/react/Suspense.md
+++ b/src/content/reference/react/Suspense.md
@@ -2,6 +2,8 @@
title:
---
+
+
`` lets you display a fallback until its children have finished loading.
diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md
index 9cae7238657..2f0ab907cf4 100644
--- a/src/content/reference/react/cloneElement.md
+++ b/src/content/reference/react/cloneElement.md
@@ -2,6 +2,8 @@
title: cloneElement
---
+
+
Using `cloneElement` is uncommon and can lead to fragile code. [See common alternatives.](#alternatives)
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md
index a653633c1d7..41769a14a0b 100644
--- a/src/content/reference/react/createContext.md
+++ b/src/content/reference/react/createContext.md
@@ -2,6 +2,8 @@
title: createContext
---
+
+
`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read.
diff --git a/src/content/reference/react/createElement.md b/src/content/reference/react/createElement.md
index a5f684c66f9..081e7b9ac39 100644
--- a/src/content/reference/react/createElement.md
+++ b/src/content/reference/react/createElement.md
@@ -2,6 +2,8 @@
title: createElement
---
+
+
`createElement` lets you create a React element. It serves as an alternative to writing [JSX.](/learn/writing-markup-with-jsx)
diff --git a/src/content/reference/react/createFactory.md b/src/content/reference/react/createFactory.md
index eb851ad978d..118b85d0515 100644
--- a/src/content/reference/react/createFactory.md
+++ b/src/content/reference/react/createFactory.md
@@ -2,6 +2,10 @@
title: createFactory
---
+
+
+[//]: # (Gets officially documented starting with 0.12.2 according to https://web.archive.org/)
+
This API will be removed in a future major version of React. [See the alternatives.](#alternatives)
diff --git a/src/content/reference/react/createRef.md b/src/content/reference/react/createRef.md
index 2a3ba6aa3df..45eedc3e98d 100644
--- a/src/content/reference/react/createRef.md
+++ b/src/content/reference/react/createRef.md
@@ -2,6 +2,8 @@
title: createRef
---
+
+
`createRef` is mostly used for [class components.](/reference/react/Component) Function components typically rely on [`useRef`](/reference/react/useRef) instead.
diff --git a/src/content/reference/react/forwardRef.md b/src/content/reference/react/forwardRef.md
index bf34a879b32..3be4b615097 100644
--- a/src/content/reference/react/forwardRef.md
+++ b/src/content/reference/react/forwardRef.md
@@ -2,6 +2,8 @@
title: forwardRef
---
+
+
`forwardRef` lets your component expose a DOM node to parent component with a [ref.](/learn/manipulating-the-dom-with-refs)
diff --git a/src/content/reference/react/isValidElement.md b/src/content/reference/react/isValidElement.md
index bc4fbaef454..07ef1a091e6 100644
--- a/src/content/reference/react/isValidElement.md
+++ b/src/content/reference/react/isValidElement.md
@@ -2,6 +2,8 @@
title: isValidElement
---
+
+
`isValidElement` checks whether a value is a React element.
diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md
index e6dcf877dd9..355b192ed94 100644
--- a/src/content/reference/react/lazy.md
+++ b/src/content/reference/react/lazy.md
@@ -2,6 +2,8 @@
title: lazy
---
+
+
`lazy` lets you defer loading component's code until it is rendered for the first time.
diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md
index 26fa9ed9cc6..202e0705128 100644
--- a/src/content/reference/react/memo.md
+++ b/src/content/reference/react/memo.md
@@ -2,6 +2,8 @@
title: memo
---
+
+
`memo` lets you skip re-rendering a component when its props are unchanged.
diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md
index 4773d77c7bb..a7bac40d732 100644
--- a/src/content/reference/react/startTransition.md
+++ b/src/content/reference/react/startTransition.md
@@ -2,6 +2,8 @@
title: startTransition
---
+
+
`startTransition` lets you update the state without blocking the UI.
diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md
index 63b36a600c9..daac91911b0 100644
--- a/src/content/reference/react/useCallback.md
+++ b/src/content/reference/react/useCallback.md
@@ -2,6 +2,8 @@
title: useCallback
---
+
+
`useCallback` is a React Hook that lets you cache a function definition between re-renders.
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index ed231c39483..f442d611054 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -2,6 +2,8 @@
title: useContext
---
+
+
`useContext` is a React Hook that lets you read and subscribe to [context](/learn/passing-data-deeply-with-context) from your component.
diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md
index 8826665e7dc..c5aa20aa4d8 100644
--- a/src/content/reference/react/useDebugValue.md
+++ b/src/content/reference/react/useDebugValue.md
@@ -2,6 +2,8 @@
title: useDebugValue
---
+
+
`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools)
diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index f2505454223..f0a094d2672 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -2,6 +2,8 @@
title: useDeferredValue
---
+
+
`useDeferredValue` is a React Hook that lets you defer updating a part of the UI.
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 1bb96e1e829..8971b7ec2db 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -2,6 +2,8 @@
title: useEffect
---
+
+
`useEffect` is a React Hook that lets you [synchronize a component with an external system.](/learn/synchronizing-with-effects)
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 4ea029f27a6..9ae340d80f2 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -2,6 +2,8 @@
title: useId
---
+
+
`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.
diff --git a/src/content/reference/react/useImperativeHandle.md b/src/content/reference/react/useImperativeHandle.md
index 12ab715ef50..6ae0b7651c2 100644
--- a/src/content/reference/react/useImperativeHandle.md
+++ b/src/content/reference/react/useImperativeHandle.md
@@ -2,6 +2,8 @@
title: useImperativeHandle
---
+
+
`useImperativeHandle` is a React Hook that lets you customize the handle exposed as a [ref.](/learn/manipulating-the-dom-with-refs)
diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 0238facf7b4..1f9b4768b0d 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -2,6 +2,8 @@
title: useInsertionEffect
---
+
+
`useInsertionEffect` is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want [`useEffect`](/reference/react/useEffect) or [`useLayoutEffect`](/reference/react/useLayoutEffect) instead.
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 5af3ec5a6c7..32e5f31c0eb 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -2,6 +2,8 @@
title: useLayoutEffect
---
+
+
`useLayoutEffect` can hurt performance. Prefer [`useEffect`](/reference/react/useEffect) when possible.
@@ -10,6 +12,7 @@ title: useLayoutEffect
+
`useLayoutEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before the browser repaints the screen.
```js
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index 543c1112500..58e382e80e2 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -2,6 +2,8 @@
title: useMemo
---
+
+
`useMemo` is a React Hook that lets you cache the result of a calculation between re-renders.
diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md
index 3477660d2c7..32286f91168 100644
--- a/src/content/reference/react/useReducer.md
+++ b/src/content/reference/react/useReducer.md
@@ -2,6 +2,8 @@
title: useReducer
---
+
+
`useReducer` is a React Hook that lets you add a [reducer](/learn/extracting-state-logic-into-a-reducer) to your component.
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index 4af7e9535f0..c1984bf7d96 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -2,6 +2,8 @@
title: useRef
---
+
+
`useRef` is a React Hook that lets you reference a value that's not needed for rendering.
diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md
index d23fa489b3a..086f39862fd 100644
--- a/src/content/reference/react/useState.md
+++ b/src/content/reference/react/useState.md
@@ -2,6 +2,8 @@
title: useState
---
+
+
`useState` is a React Hook that lets you add a [state variable](/learn/state-a-components-memory) to your component.
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index 4169e231e2f..3b14cdb30f1 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -2,6 +2,8 @@
title: useSyncExternalStore
---
+
+
`useSyncExternalStore` is a React Hook that lets you subscribe to an external store.
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index a6fcde7107f..0ac57e6acd8 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -2,6 +2,8 @@
title: useTransition
---
+
+
`useTransition` is a React Hook that lets you update the state without blocking the UI.