From 469945b47182a16db5456c9eedb985044ffd5246 Mon Sep 17 00:00:00 2001
From: Dimitris Karagiannis <mitch.karajohn@gmail.com>
Date: Thu, 21 Sep 2023 23:58:39 +0300
Subject: [PATCH 1/3] feat: Create new component and register it in
 MDXComponents.tsx

---
 src/components/MDX/AddedInVersion.tsx | 58 +++++++++++++++++++++++++++
 src/components/MDX/MDXComponents.tsx  |  2 +
 2 files changed, 60 insertions(+)
 create mode 100644 src/components/MDX/AddedInVersion.tsx

diff --git a/src/components/MDX/AddedInVersion.tsx b/src/components/MDX/AddedInVersion.tsx
new file mode 100644
index 00000000000..828575fe636
--- /dev/null
+++ b/src/components/MDX/AddedInVersion.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ */
+
+import InlineCode from './InlineCode';
+import Link from './Link';
+import * as React from 'react';
+
+const versionChangelogs = {
+  '18.0.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022',
+  '16.9.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1690-august-8-2019',
+  '16.8.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1680-february-6-2019',
+  '16.6.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1660-october-23-2018',
+  '16.3.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1630-march-29-2018',
+  '16.2.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1620-november-28-2017',
+  '16.0.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1600-september-26-2017',
+  '15.3.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#1530-july-29-2016',
+  '0.14.3':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#0143-november-18-2015',
+  '0.14.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#0140-october-7-2015',
+  '0.13.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#0130-march-10-2015',
+  '0.12.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#0120-october-28-2014',
+  '0.11.2':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#0112-september-16-2014',
+  '0.10.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#0100-march-21-2014',
+  '0.5.0':
+    'https://github.com/facebook/react/blob/main/CHANGELOG.md#050-october-16-2013',
+};
+
+export interface AddedInVersionProps {
+  version: keyof typeof versionChangelogs;
+}
+
+function AddedInVersion({version}: AddedInVersionProps) {
+  const changelog = versionChangelogs[version];
+  return (
+    <div className={'text-sm leading-large'}>
+      <em>Added in</em>{' '}
+      <InlineCode isLink={Boolean(changelog)}>
+        {changelog ? <Link href={changelog}>{version}</Link> : version}
+      </InlineCode>
+    </div>
+  );
+}
+
+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,

From c183ff45d3b9a9e47b9d28e74950fe44fa1fd38d Mon Sep 17 00:00:00 2001
From: Dimitris Karagiannis <mitch.karajohn@gmail.com>
Date: Thu, 21 Sep 2023 23:59:30 +0300
Subject: [PATCH 2/3] feat: Add "Added in" section for every part of the API

---
 src/content/reference/react-dom/client/createRoot.md          | 2 ++
 src/content/reference/react-dom/client/hydrateRoot.md         | 2 ++
 src/content/reference/react-dom/createPortal.md               | 2 ++
 src/content/reference/react-dom/findDOMNode.md                | 2 ++
 src/content/reference/react-dom/flushSync.md                  | 4 ++++
 src/content/reference/react-dom/hydrate.md                    | 2 ++
 src/content/reference/react-dom/render.md                     | 2 ++
 src/content/reference/react-dom/server/renderToNodeStream.md  | 2 ++
 .../reference/react-dom/server/renderToPipeableStream.md      | 2 ++
 .../reference/react-dom/server/renderToReadableStream.md      | 2 ++
 .../reference/react-dom/server/renderToStaticMarkup.md        | 2 ++
 .../reference/react-dom/server/renderToStaticNodeStream.md    | 2 ++
 src/content/reference/react-dom/server/renderToString.md      | 2 ++
 src/content/reference/react-dom/unmountComponentAtNode.md     | 2 ++
 src/content/reference/react/Children.md                       | 4 ++++
 src/content/reference/react/Component.md                      | 2 ++
 src/content/reference/react/Fragment.md                       | 2 ++
 src/content/reference/react/Profiler.md                       | 2 ++
 src/content/reference/react/PureComponent.md                  | 2 ++
 src/content/reference/react/StrictMode.md                     | 1 +
 src/content/reference/react/Suspense.md                       | 2 ++
 src/content/reference/react/cloneElement.md                   | 2 ++
 src/content/reference/react/createContext.md                  | 2 ++
 src/content/reference/react/createElement.md                  | 2 ++
 src/content/reference/react/createFactory.md                  | 4 ++++
 src/content/reference/react/createRef.md                      | 2 ++
 src/content/reference/react/forwardRef.md                     | 2 ++
 src/content/reference/react/isValidElement.md                 | 2 ++
 src/content/reference/react/lazy.md                           | 2 ++
 src/content/reference/react/memo.md                           | 2 ++
 src/content/reference/react/startTransition.md                | 2 ++
 src/content/reference/react/useCallback.md                    | 2 ++
 src/content/reference/react/useContext.md                     | 2 ++
 src/content/reference/react/useDebugValue.md                  | 2 ++
 src/content/reference/react/useDeferredValue.md               | 2 ++
 src/content/reference/react/useEffect.md                      | 2 ++
 src/content/reference/react/useId.md                          | 2 ++
 src/content/reference/react/useImperativeHandle.md            | 2 ++
 src/content/reference/react/useInsertionEffect.md             | 2 ++
 src/content/reference/react/useLayoutEffect.md                | 3 +++
 src/content/reference/react/useMemo.md                        | 2 ++
 src/content/reference/react/useReducer.md                     | 2 ++
 src/content/reference/react/useRef.md                         | 2 ++
 src/content/reference/react/useState.md                       | 2 ++
 src/content/reference/react/useSyncExternalStore.md           | 2 ++
 src/content/reference/react/useTransition.md                  | 2 ++
 46 files changed, 98 insertions(+)

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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="0.13.0" />
+
 <Deprecated>
 
 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..4c2a5cb459a 100644
--- a/src/content/reference/react-dom/flushSync.md
+++ b/src/content/reference/react-dom/flushSync.md
@@ -2,6 +2,10 @@
 title: flushSync
 ---
 
+<AddedInVersion version="16" />
+
+[//]: # (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)
+
 <Pitfall>
 
 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
 ---
 
+<AddedInVersion version="16.0.0" />
+
 <Deprecated>
 
 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
 ---
 
+<AddedInVersion version="0.12.0" />
+
 <Deprecated>
 
 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
 ---
 
+<AddedInVersion version="16.0.0" />
+
 <Deprecated>
 
 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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="0.14.3" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="0.14.3" />
+
 <Pitfall>
 
 `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
 ---
 
+<AddedInVersion version="0.5.0" />
+
 <Deprecated>
 
 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..085b039215e 100644
--- a/src/content/reference/react/Children.md
+++ b/src/content/reference/react/Children.md
@@ -2,6 +2,10 @@
 title: Children
 ---
 
+<AddedInVersion version="0.10.0" />
+
+[//]: # (Does not show up in changelogs but only appears in v0.10.0 docs based on https://web.archive.org/ research)
+
 <Pitfall>
 
 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
 ---
 
+<AddedInVersion version="0.13.0" />
+
 <Pitfall>
 
 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: <Fragment> (<>...</>)
 ---
 
+<AddedInVersion version="16.2.0" />
+
 <Intro>
 
 `<Fragment>`, 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: <Profiler>
 ---
 
+<AddedInVersion version="16.9.0" />
+
 <Intro>
 
 `<Profiler>` 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
 ---
 
+<AddedInVersion version="15.3.0" />
+
 <Pitfall>
 
 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: <StrictMode>
 ---
 
+<AddedInVersion version="16.3.0" />
 
 <Intro>
 
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: <Suspense>
 ---
 
+<AddedInVersion version="16.6.0" />
+
 <Intro>
 
 `<Suspense>` 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
 ---
 
+<AddedInVersion version="0.13.0" />
+
 <Pitfall>
 
 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
 ---
 
+<AddedInVersion version="16.3.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="0.11.2" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="0.12.0" />
+
+[//]: # (Gets officially documented starting with 0.12.2 according to https://web.archive.org/)
+
 <Deprecated>
 
 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
 ---
 
+<AddedInVersion version="16.3.0" />
+
 <Pitfall>
 
 `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
 ---
 
+<AddedInVersion version="16.3.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="0.12.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.6.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.6.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Pitfall>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Pitfall>
 
 `useLayoutEffect` can hurt performance. Prefer [`useEffect`](/reference/react/useEffect) when possible.
@@ -10,6 +12,7 @@ title: useLayoutEffect
 
 <Intro>
 
+
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="16.8.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `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
 ---
 
+<AddedInVersion version="18.0.0" />
+
 <Intro>
 
 `useTransition` is a React Hook that lets you update the state without blocking the UI.

From 2fbf483152fd0ca43fc4d399d319f295841d91b5 Mon Sep 17 00:00:00 2001
From: Dimitris Karagiannis <mitch.karajohn@gmail.com>
Date: Thu, 19 Oct 2023 18:06:44 +0300
Subject: [PATCH 3/3] chore: reformat comments

---
 src/content/reference/react-dom/flushSync.md | 2 +-
 src/content/reference/react/Children.md      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md
index 4c2a5cb459a..15acd530740 100644
--- a/src/content/reference/react-dom/flushSync.md
+++ b/src/content/reference/react-dom/flushSync.md
@@ -4,7 +4,7 @@ title: flushSync
 
 <AddedInVersion version="16" />
 
-[//]: # (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)
+{/* 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 */}
 
 <Pitfall>
 
diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md
index 085b039215e..89640b62998 100644
--- a/src/content/reference/react/Children.md
+++ b/src/content/reference/react/Children.md
@@ -4,7 +4,7 @@ title: Children
 
 <AddedInVersion version="0.10.0" />
 
-[//]: # (Does not show up in changelogs but only appears in v0.10.0 docs based on https://web.archive.org/ research)
+{/* Does not show up in changelogs but only appears in v0.10.0 docs based on https://web.archive.org/ research */}
 
 <Pitfall>