Remove <NextMajor> callouts

Author: rickhanlonii

src/content/learn/manipulating-the-dom-with-refs.md

@@ -258,9 +258,11 @@ export default function CatFriends() {
                 const map = getMap();
                 if (node) {
                   map.set(cat, node);
-                } else {
-                  map.delete(cat);
                 }
+
+                return () => {
+                  map.delete(cat);
+                };
               }}
             >
               <img src={cat} />
@@ -323,28 +325,6 @@ li {
 
 In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a [Map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) from item ID to a DOM node. ([Refs can hold any values!](/learn/referencing-values-with-refs)) The [`ref` callback](/reference/react-dom/components/common#ref-callback) on every list item takes care to update the Map:
 
-```js
-<li
-  key={cat.id}
-  ref={node => {
-    const map = getMap();
-    if (node) {
-      // Add to the Map
-      map.set(cat, node);
-    } else {
-      // Remove from the Map
-      map.delete(cat);
-    }
-  }}
->
-```
-
-This lets you read individual DOM nodes from the Map later.
-
-<NextMajor>
-
-Starting in React 19, callback refs can return a cleanup function. When the cleanup function is provided, React will not call the `ref` callback with `null` and call the cleanup function instead:
-
 ```js
 <li
   key={cat.id}
@@ -361,7 +341,7 @@ Starting in React 19, callback refs can return a cleanup function. When the clea
 >
 ```
 
-</NextMajor>
+This lets you read individual DOM nodes from the Map later.
 
 </DeepDive>
 

src/content/reference/react-dom/client/createRoot.md

@@ -45,8 +45,8 @@ An app fully built with React will usually only have one `createRoot` call for i
 
 * **optional** `options`: An object with options for this React root.
 
-  * <NextMajorBadge title="This feature is available in React 19 beta and the React canary channel" /> **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
-  * <NextMajorBadge title="This feature is available in React 19 beta and the React canary channel" /> **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`.
   * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
   * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page.
 
@@ -346,14 +346,6 @@ It is uncommon to call `render` multiple times. Usually, your components will [u
 
 ### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
 
-<NextMajor>
-
-`onUncaughtError` is available in React 19 beta, and the React canary channel.
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
 
 ```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]
@@ -596,12 +588,6 @@ export default function App() {
 
 ### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
 
-<Canary>
-
-`onCaughtError` is only available in the latest React Canary release.
-
-</Canary>
-
 By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
 
 ```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]]

src/content/reference/react-dom/client/hydrateRoot.md

@@ -41,8 +41,8 @@ React will attach to the HTML that exists inside the `domNode`, and take over ma
 
 * **optional** `options`: An object with options for this React root.
 
-  * <NextMajorBadge title="This feature is available in React 19 beta and the React canary channel" /> **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
-  * <NextMajorBadge title="This feature is available in React 19 beta and the React canary channel" /> **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`.
+  * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`.
   * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`.
   * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server.
 
@@ -376,14 +376,6 @@ It is uncommon to call [`root.render`](#root-render) on a hydrated root. Usually
 
 ### Show a dialog for uncaught errors {/*show-a-dialog-for-uncaught-errors*/}
 
-<NextMajor>
-
-`onUncaughtError` is currently available in React 19 beta, and the React canary channel.
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option:
 
 ```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]
@@ -630,12 +622,6 @@ export default function App() {
 
 ### Displaying Error Boundary errors {/*displaying-error-boundary-errors*/}
 
-<Canary>
-
-`onCaughtError` is only available in the latest React Canary release.
-
-</Canary>
-
 By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary):
 
 ```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]]

src/content/reference/react-dom/components/common.md

@@ -246,45 +246,42 @@ These events fire for resources like [`<audio>`](https://developer.mozilla.org/e
 Instead of a ref object (like the one returned by [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), you may pass a function to the `ref` attribute.
 
 ```js
-<div ref={(node) => console.log(node)} />
+<div ref={(node) => {
+  console.log('Attached', node);
+
+  return () => {
+    console.log('Clean up', node)
+  }
+}}>
 ```
 
 [See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
 
-When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your `ref` callback with `null`.
+When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your the cleanup function returned from the callback.
 
 React will also call your `ref` callback whenever you pass a *different* `ref` callback. In the above example, `(node) => { ... }` is a different function on every render. When your component re-renders, the *previous* function will be called with `null` as the argument, and the *next* function will be called with the DOM node.
 
 #### Parameters {/*ref-callback-parameters*/}
 
-* `node`: A DOM node or `null`. React will pass you the DOM node when the ref gets attached, and `null` when the `ref` gets detached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily detached and re-attached during every re-render of the component.
+* `node`: A DOM node. React will pass you the DOM node when the ref gets attached. Unless you pass the same function reference for the `ref` callback on every render, the callback will get temporarily cleanup and re-create during every re-render of the component.
 
-<NextMajor>
+<Note>
 
-#### Returns {/*returns*/}
-In React 19 beta, ref callbacks can return a cleanup function. When a cleanup function is provided, React will not call the `ref` callback with `null` and will call the cleanup function instead.
+#### React 19 added cleanup functions for `ref` callbacks. {/*react-19-added-cleanup-functions-for-ref-callbacks*/}
 
-*  **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached.
+To support backwards compatibility, if a cleanup function is not returned from the `ref` callback, `node` will be called with `null` when the `ref` is detached. This behavior will be removed in a future version.
 
-```js
+</Note>
 
-<div ref={(node) => {
-  console.log(node);
-
-  return () => {
-    console.log('Clean up', node)
-  }
-}}>
+#### Returns {/*returns*/}
 
-```
+* **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached. This behavior will be removed in a future version.
 
 #### Caveats {/*caveats*/}
 
 * When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
 * When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If not cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
 
-</NextMajor>
-
 ---
 
 ### React event object {/*react-event-object*/}

src/content/reference/react-dom/components/form.md

@@ -2,17 +2,6 @@
 title: "<form>"
 ---
 
-<NextMajor>
-
-React's extensions to `<form>` are currently available in React 19 beta and React's canary and experimental channels. 
-
-In stable releases of React, `<form>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). 
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
-
 <Intro>
 
 The [built-in browser `<form>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) lets you create interactive controls for submitting information.

src/content/reference/react-dom/components/input.md

@@ -2,16 +2,6 @@
 title: "<input>"
 ---
 
-<NextMajor>
-
-React's extensions to the `formAction` prop of `<input>` is currently available in React 19 beta and the React canary channel.
-
-In stable releases of React, `<input>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components).
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Intro>
 
 The [built-in browser `<input>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) lets you render different kinds of form inputs.
@@ -42,7 +32,7 @@ To display an input, render the [built-in browser `<input>`](https://developer.m
 
 `<input>` supports all [common element props.](/reference/react-dom/components/common#props)
 
-- <NextMajorBadge title="This feature is only available in React 19 beta and the React Canary channel"/> [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
+- [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
 
 You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
 

src/content/reference/react-dom/components/link.md

@@ -2,16 +2,6 @@
 link: "<link>"
 ---
 
-<NextMajor>
-
-React's extensions to `<link>` are currently available in React 19 beta and the React canary channel. 
-
-In stable releases of React `<link>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components).
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Intro>
 
 The [built-in browser `<link>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) lets you use external resources such as stylesheets or annotate the document with link metadata.

src/content/reference/react-dom/components/meta.md

@@ -2,17 +2,6 @@
 meta: "<meta>"
 ---
 
-<NextMajor>
-
-React's extensions to `<meta>` are currently available in React 19 beta and the React canary channel. 
-
-In stable releases of React `<meta>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components).
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
-
 <Intro>
 
 The [built-in browser `<meta>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) lets you add metadata to the document.

src/content/reference/react-dom/components/script.md

@@ -2,16 +2,6 @@
 script: "<script>"
 ---
 
-<NextMajor>
-
-React's extensions to `<script>` are currently available in React 19 beta and the React canary channel.
-
-In stable releases of React `<script>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components).
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Intro>
 
 The [built-in browser `<script>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) lets you add a script to your document.

src/content/reference/react-dom/components/style.md

@@ -2,16 +2,6 @@
 style: "<style>"
 ---
 
-<NextMajor>
-
-React's extensions to `<style>` are currently available in React 19 beta and the React canary channel.
-
-In stable releases of React `<style>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components).
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Intro>
 
 The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) lets you add inline CSS stylesheets to your document.

src/content/reference/react-dom/components/title.md

@@ -2,17 +2,6 @@
 title: "<title>"
 ---
 
-<NextMajor>
-
-React's extensions to `<title>` are currently available in React 19 beta and the React canary channels.
-
-In stable releases of React `<title>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components).
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
-
 <Intro>
 
 The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document.

src/content/reference/react-dom/hooks/index.md

@@ -12,14 +12,6 @@ The `react-dom` package contains Hooks that are only supported for web applicati
 
 ## Form Hooks {/*form-hooks*/}
 
-<NextMajor>
-
-Form Hooks are currently available in React 19 beta and the React canary channel.
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 *Forms* let you create interactive controls for submitting information.  To manage forms in your components, use one of these Hooks:
 
 * [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) allows you to make updates to the UI based on the status of the a form.

src/content/reference/react-dom/hooks/useFormStatus.md

@@ -3,14 +3,6 @@ title: useFormStatus
 canary: true
 ---
 
-<NextMajor>
-
-The `useFormStatus` Hook is currently available in React 19 beta and the React canary channel.
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Intro>
 
 `useFormStatus` is a Hook that gives you status information of the last form submission.

src/content/reference/react-dom/preconnect.md

@@ -2,14 +2,6 @@
 title: preconnect
 ---
 
-<NextMajor>
-
-The `preconnect` function is available in React 19 beta and the React Canary channel.
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Intro>
 
 `preconnect` lets you eagerly connect to a server that you expect to load resources from.

src/content/reference/react-dom/prefetchDNS.md

@@ -2,14 +2,6 @@
 title: prefetchDNS
 ---
 
-<NextMajor>
-
-The `prefetchDNS` function is currently available in React 19 beta and the React canary channel.
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Intro>
 
 `prefetchDNS` lets you eagerly look up the IP of a server that you expect to load resources from.

src/content/reference/react-dom/preinit.md

@@ -2,14 +2,6 @@
 title: preinit
 ---
 
-<NextMajor>
-
-The `preinit` function is currently available in React 19 beta and the React canary channel.
-
-Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
-
-</NextMajor>
-
 <Note>
 
 [React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.