Add "Added in <version>" note for each part of the stable API

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;

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,

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.

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)

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.

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)

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.

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.

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.

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.

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)

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)

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.

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)

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)

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.

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)

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)

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.

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.

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)

src/content/reference/react/StrictMode.md

@@ -2,6 +2,7 @@
 title: <StrictMode>
 ---
 
+<AddedInVersion version="16.3.0" />
 
 <Intro>
 

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.

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)

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.

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)

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)

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.

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)

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.

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.

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.

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.

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.

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.

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)

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.