From 0f7e4ec3c68dc5685660f1c2bce0c319000b06a1 Mon Sep 17 00:00:00 2001
From: Roman Cherepanov <romach007@gmail.com>
Date: Tue, 3 Nov 2026 23:05:08 +0200
Subject: [PATCH 01/44] Fix broken React Router links in "Synchronizing with
 Effects" and useEffect reference (#8707)

* Fix broken React Router link in "Synchronizing with Effects"

* Fix broken React Router link in useEffect reference
---
 src/content/learn/synchronizing-with-effects.md | 2 +-
 src/content/reference/react/useEffect.md        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index 1eec63388..a43347390 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -733,7 +733,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww
 This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
 
 - **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router](https://reactrouter.com/). You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
 
 You can continue fetching data directly in Effects if neither of these approaches suit you.
 
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index 218e65ffb..b56380968 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1050,7 +1050,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww
 This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
 
 - **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
+- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router](https://reactrouter.com/). You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
 
 You can continue fetching data directly in Effects if neither of these approaches suit you.
 

From 97074a191940fa8562ef1ad07fd5239f2eef6d34 Mon Sep 17 00:00:00 2001
From: Yash Gupta <guptachinu354@gmail.com>
Date: Wed, 4 Nov 2026 02:36:47 +0530
Subject: [PATCH 02/44] docs: add <form> to React DOM components overview
 (#8717)

---
 src/content/reference/react-dom/components/index.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index dea91881c..454895bbd 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -24,6 +24,7 @@ This includes React-specific props like `ref` and `dangerouslySetInnerHTML`.
 
 These built-in browser components accept user input:
 
+* [`<form>`](/reference/react-dom/components/form)
 * [`<input>`](/reference/react-dom/components/input)
 * [`<select>`](/reference/react-dom/components/select)
 * [`<textarea>`](/reference/react-dom/components/textarea)
@@ -83,7 +84,7 @@ React supports all built-in browser HTML components. This includes:
 * [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption)
 * [`<figure>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)
 * [`<footer>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer)
-* [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
+* [`<form>`](/reference/react-dom/components/form)
 * [`<h1>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1)
 * [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
 * [`<header>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)

From 0334d1db7bb6b81d75bed0583f9eba89cd9ec9da Mon Sep 17 00:00:00 2001
From: SHAKIL UR REHMAN <137157095+ShakilUrRehman21@users.noreply.github.com>
Date: Wed, 4 Nov 2026 02:38:14 +0530
Subject: [PATCH 03/44] Update conferences: move concluded Sep 2026 events to
 Past, fix React Conf Japan 2027 section (#8700)

* Update conferences: move concluded Sep 2026 events to Past, fix React Conf Japan 2027 section

* Update conferences: move concluded CityJS Athens 2026 to Past section

* Update conferences: move concluded React Advanced London 2026 to Past section
---
 src/content/community/conferences.md | 45 ++++++++++++++--------------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 37d3726e7..197f719fb 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,26 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
-September 10-11,  2026. In-person in Zurich, Switzerland
-
-[Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
-
-### React Alicante 2026 {/*react-alicante-2026*/}
-Sep 24 - 26,  2026. In-person in Alicante
-
-[Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante)
-
-### CityJS Athens 2026 {/*cityjs-athens-2026*/}
-October 21-23,  2026. In-person in Athens
-
-[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
-
-### React Advanced London 2026 {/*react-advanced-london-2026*/}
-October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
-
-[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
-
 ### React Summit US 2026 {/*react-summit-us-2026*/}
 November 17 & 20, 2026. In-person in New York, USA + online (hybrid event)
 
@@ -45,6 +25,11 @@ April 15 & 19, 2027. In-person in Singapore + online (hybrid event)
 
 [Website](https://reactsummit.asia/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
 
+### React Conf Japan 2027 {/*react-conf-japan-2027*/}
+April 24,  2027. In-person in Tokyo, Japan
+
+[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+
 ### React Summit 2027 {/*react-summit-2027*/}
 May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
 
@@ -53,11 +38,25 @@ May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
 
 ## Past Conferences {/*past-conferences*/}
 
+### React Advanced London 2026 {/*react-advanced-london-2026*/}
+October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
 
-### React Conf Japan 2027 {/*react-conf-japan-2027*/}
-April 24,  2027. In-person in Tokyo, Japan
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/)
 
-[Website](https://reactconf.jp/) - [Twitter](https://x.com/reactconfjp)
+### CityJS Athens 2026 {/*cityjs-athens-2026*/}
+October 21-23,  2026. In-person in Athens
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Alicante 2026 {/*react-alicante-2026*/}
+Sep 24 - 26,  2026. In-person in Alicante
+
+[Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante)
+
+### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
+September 10-11,  2026. In-person in Zurich, Switzerland
+
+[Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
 
 ### CityJS London 2026 {/*cityjs-london-2026*/}
 April 14-17,  2026. In-person in London

From 7ca4886511e5219d7d14d84d51246c4ad4a04182 Mon Sep 17 00:00:00 2001
From: Deepu S Nath <deepusnath@gmail.com>
Date: Wed, 4 Nov 2026 02:45:52 +0530
Subject: [PATCH 04/44] Normalize aria-labels on TeamMember social links
 (#8592)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Twitter, Threads, and Bluesky links already included the member's
name in their aria-label, but GitHub and personal-site links used
generic labels ("GitHub Profile", "Personal Site") with no name —
inconsistent and confusing for screen reader users scanning the
team page. Standardize all five link types to include the member's
name, and mark their icons aria-hidden since the link's accessible
name already conveys the same information.

Fixes #8552

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/components/MDX/TeamMember.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx
index 2716fa2d1..3be1fa7a7 100644
--- a/src/components/MDX/TeamMember.tsx
+++ b/src/components/MDX/TeamMember.tsx
@@ -68,7 +68,7 @@ function GroupBadges({group}: {group: string}) {
   );
 }
 
-// TODO: good alt text for images/links
+// TODO: good alt text for images
 export function TeamMember({
   name,
   title,
@@ -113,7 +113,7 @@ export function TeamMember({
                   aria-label={`${name} on Twitter`}
                   href={`https://twitter.com/${twitter}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconTwitter className="pe-1" />
+                  <IconTwitter className="pe-1" aria-hidden="true" />
                   {twitter}
                 </ExternalLink>
               </div>
@@ -124,7 +124,7 @@ export function TeamMember({
                   aria-label={`${name} on Threads`}
                   href={`https://threads.net/${threads}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconThreads className="pe-1" />
+                  <IconThreads className="pe-1" aria-hidden="true" />
                   {threads}
                 </ExternalLink>
               </div>
@@ -135,7 +135,7 @@ export function TeamMember({
                   aria-label={`${name} on Bluesky`}
                   href={`https://bsky.app/profile/${bsky}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconBsky className="pe-1" />
+                  <IconBsky className="pe-1" aria-hidden="true" />
                   {bsky}
                 </ExternalLink>
               </div>
@@ -143,19 +143,19 @@ export function TeamMember({
             {github && (
               <div className="me-4">
                 <ExternalLink
-                  aria-label="GitHub Profile"
+                  aria-label={`${name} on GitHub`}
                   href={`https://github.com/${github}`}
                   className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                  <IconGitHub className="pe-1" /> {github}
+                  <IconGitHub className="pe-1" aria-hidden="true" /> {github}
                 </ExternalLink>
               </div>
             )}
             {personal && (
               <ExternalLink
-                aria-label="Personal Site"
+                aria-label={`${name}'s personal website`}
                 href={`https://${personal}`}
                 className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
-                <IconLink className="pe-1" /> {personal}
+                <IconLink className="pe-1" aria-hidden="true" /> {personal}
               </ExternalLink>
             )}
           </div>

From 6be2e2a1c45bd0679b18f671d7df2cfbec255b7d Mon Sep 17 00:00:00 2001
From: martin rebo <martin@warteamx.com>
Date: Tue, 3 Nov 2026 22:19:39 +0100
Subject: [PATCH 05/44] docs: Add useOptimistic hook description to hooks
 reference page (#8571)

---
 src/content/reference/react/hooks.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
index ab48b644b..a8586f9f6 100644
--- a/src/content/reference/react/hooks.md
+++ b/src/content/reference/react/hooks.md
@@ -18,6 +18,7 @@ To add state to a component, use one of these Hooks:
 
 * [`useState`](/reference/react/useState) declares a state variable that you can update directly.
 * [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+* [`useOptimistic`](/reference/react/useOptimistic) lets you show a different state while an async action is pending.
 
 ```js
 function ImageGallery() {

From 5532a012cec846f06cc8ea7bc63042051d530166 Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Tue, 3 Nov 2026 15:20:42 -0600
Subject: [PATCH 06/44] Revert "docs: Add useOptimistic hook description to
 hooks reference page (#8571)" (#8729)

This reverts commit 6be2e2a1c45bd0679b18f671d7df2cfbec255b7d.
---
 src/content/reference/react/hooks.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
index a8586f9f6..ab48b644b 100644
--- a/src/content/reference/react/hooks.md
+++ b/src/content/reference/react/hooks.md
@@ -18,7 +18,6 @@ To add state to a component, use one of these Hooks:
 
 * [`useState`](/reference/react/useState) declares a state variable that you can update directly.
 * [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
-* [`useOptimistic`](/reference/react/useOptimistic) lets you show a different state while an async action is pending.
 
 ```js
 function ImageGallery() {

From ae5c052513bff992aef8f9e4454126e5c6c524ed Mon Sep 17 00:00:00 2001
From: Shreyash <160615932+Iitian001@users.noreply.github.com>
Date: Wed, 4 Nov 2026 03:02:35 +0530
Subject: [PATCH 07/44] docs: add useOptimistic to Built-in React Hooks
 overview (#8625)

Co-authored-by: Iitian001 <Iitian001@users.noreply.github.com>
---
 src/content/reference/react/hooks.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/reference/react/hooks.md b/src/content/reference/react/hooks.md
index ab48b644b..a8586f9f6 100644
--- a/src/content/reference/react/hooks.md
+++ b/src/content/reference/react/hooks.md
@@ -18,6 +18,7 @@ To add state to a component, use one of these Hooks:
 
 * [`useState`](/reference/react/useState) declares a state variable that you can update directly.
 * [`useReducer`](/reference/react/useReducer) declares a state variable with the update logic inside a [reducer function.](/learn/extracting-state-logic-into-a-reducer)
+* [`useOptimistic`](/reference/react/useOptimistic) lets you show a different state while an async action is pending.
 
 ```js
 function ImageGallery() {

From 6b0a30d54e188ce6f9f84ee6187598aab5d7f2eb Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Tue, 3 Nov 2026 20:54:24 -0600
Subject: [PATCH 08/44] Add missing 2026 conferences (#8730)

---
 src/content/community/conferences.md | 30 ++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 197f719fb..d36043e29 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -38,6 +38,11 @@ May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event)
 
 ## Past Conferences {/*past-conferences*/}
 
+### React India 2026 {/*react-india-2026*/}
+October 29-31, 2026. In-person in Goa, India
+
+[Website](https://www.reactindia.io/) - [Twitter](https://x.com/react_india)
+
 ### React Advanced London 2026 {/*react-advanced-london-2026*/}
 October 23 & 26, 2026. In-person in London, UK + online (hybrid event)
 
@@ -53,11 +58,36 @@ Sep 24 - 26,  2026. In-person in Alicante
 
 [Website](https://reactalicante.es//) - [Twitter](https://x.com/ReactAlicante)
 
+### React Native Connection 2026 {/*react-native-connection-2026*/}
+September 24, 2026. In-person in Paris, France
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://x.com/ReactNativeConn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+
 ### ZurichJS Conf 2026 {/*zurichjs-conf-2026*/}
 September 10-11,  2026. In-person in Zurich, Switzerland
 
 [Website](https://conf.zurichjs.com?utm_campaign=ZurichJS_Conf&utm_source=referral&utm_content=reactjs_community_conferences) - [Twitter](https://x.com/zurichjs) - [LinkedIn](https://www.linkedin.com/company/zurichjs/)
 
+### Render(ATL) 2026 🍑 {/*renderatl-2026-*/}
+August 12-13, 2026. In-person in Atlanta, GA, USA
+
+[Website](https://renderatl.com/) - [Twitter](https://x.com/renderATL) - [LinkedIn](https://www.linkedin.com/company/renderatl)
+
+### React Summit 2026 {/*react-summit-2026*/}
+June 12 & 16, 2026. In-person in Amsterdam, Netherlands + online (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit)
+
+### React Norway 2026 {/*react-norway-2026*/}
+June 5, 2026. In-person in Oslo, Norway
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### React Miami 2026 {/*react-miami-2026*/}
+April 23-24, 2026. In-person in Miami, FL, USA
+
+[Website](https://reactmiami.com/) - [Twitter](https://x.com/ReactMiamiConf)
+
 ### CityJS London 2026 {/*cityjs-london-2026*/}
 April 14-17,  2026. In-person in London
 

From 2177e28d3c3c16a8183346b9140f11ce0ee6af25 Mon Sep 17 00:00:00 2001
From: "Stanislav (Stanley) Modrak"
 <44023416+smith558@users.noreply.github.com>
Date: Wed, 4 Nov 2026 17:29:42 +0000
Subject: [PATCH 09/44] Fix Server Function examples for Actions, forms, and
 useActionState (#8538)

* Fix Server Functions documentation examples

* Fix code snippet highlights

Corrected the index of 'submitAction' in the code snippet.

* Clarify wording

* Update section titles for clarity

* Polish Server Functions examples: consistent headings, reset wording, transition comment

- Convert the remaining two Usage headings to gerund form to match the
  rest of the page and react.dev convention (anchors unchanged)
- Reset wording: "succeeds" + "the form's uncontrolled fields" (aligns with #8512)
- Comment the startTransition-after-await; bump CodeStep line accordingly

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Polish Server Functions examples

* Fix Server Functions code highlight

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/content/reference/rsc/server-functions.md | 113 ++++++++++++------
 1 file changed, 78 insertions(+), 35 deletions(-)

diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index 25d2eca2d..4dfe7efb0 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -34,7 +34,7 @@ Server Functions can be created in Server Components and passed as props to Clie
 
 ## Usage {/*usage*/}
 
-### Creating a Server Function from a Server Component {/*creating-a-server-function-from-a-server-component*/}
+### Creating a Server Function in a Server Component {/*creating-a-server-function-from-a-server-component*/}
 
 Server Components can define Server Functions with the `"use server"` directive:
 
@@ -42,7 +42,7 @@ Server Components can define Server Functions with the `"use server"` directive:
 // Server Component
 import Button from './Button';
 
-function EmptyNote () {
+function EmptyNote() {
   async function createNoteAction() {
     // Server Function
     'use server';
@@ -50,7 +50,7 @@ function EmptyNote () {
     await db.notes.create();
   }
 
-  return <Button onClick={createNoteAction}/>;
+  return <Button onClick={createNoteAction} />;
 }
 ```
 
@@ -62,46 +62,48 @@ When React renders the `EmptyNote` Server Component, it will create a reference
 export default function Button({onClick}) {
   console.log(onClick);
   // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
-  return <button onClick={() => onClick()}>Create Empty Note</button>
+  return <button onClick={() => onClick()}>Create Empty Note</button>;
 }
 ```
 
 For more, see the docs for [`"use server"`](/reference/rsc/use-server).
 
-
-### Importing Server Functions from Client Components {/*importing-server-functions-from-client-components*/}
+### Importing a Server Function into a Client Component {/*importing-server-functions-from-client-components*/}
 
 Client Components can import Server Functions from files that use the `"use server"` directive:
 
-```js [[1, 3, "createNote"]]
+```js [[1, 4, "createNote"]]
+// actions.js
 "use server";
 
 export async function createNote() {
   await db.notes.create();
 }
-
 ```
 
 When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNote` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNote` function using the reference provided:
 
-```js [[1, 2, "createNote"], [1, 5, "createNote"], [1, 7, "createNote"]]
+```js [[1, 4, "createNote"], [1, 7, "createNote"], [1, 9, "createNote"]]
+// EmptyNote.js
 "use client";
+
 import {createNote} from './actions';
 
 function EmptyNote() {
   console.log(createNote);
   // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNote'}
-  <button onClick={() => createNote()} />
+  return <button onClick={() => createNote()}>Create Empty Note</button>;
 }
 ```
 
 For more, see the docs for [`"use server"`](/reference/rsc/use-server).
 
-### Server Functions with Actions {/*server-functions-with-actions*/}
+### Calling a Server Function from an Action {/*server-functions-with-actions*/}
 
 Server Functions can be called from Actions on the client:
 
-```js [[1, 3, "updateName"]]
+```js [[1, 4, "updateName"]]
+// actions.js
 "use server";
 
 export async function updateName(name) {
@@ -109,12 +111,15 @@ export async function updateName(name) {
     return {error: 'Name is required'};
   }
   await db.users.updateName(name);
+  return {error: null};
 }
 ```
 
-```js [[1, 3, "updateName"], [1, 13, "updateName"], [2, 11, "submitAction"], [2, 25, "submitAction"]]
+```js [[1, 5, "updateName"], [1, 15, "updateName"], [2, 13, "submitAction"], [2, 28, "submitAction"]]
+// UpdateName.js
 "use client";
 
+import {useState, useTransition} from 'react';
 import {updateName} from './actions';
 
 function UpdateName() {
@@ -123,40 +128,60 @@ function UpdateName() {
 
   const [isPending, startTransition] = useTransition();
 
-  const submitAction = async () => {
+  function submitAction() {
     startTransition(async () => {
       const {error} = await updateName(name);
+      // State updates after await aren't automatically marked as Transitions,
+      // so wrap them in another startTransition.
       startTransition(() => {
-        if (error) {
-          setError(error);
-        } else {
+        setError(error);
+        if (!error) {
           setName('');
         }
       });
-    })
+    });
   }
 
   return (
     <form action={submitAction}>
-      <input type="text" name="name" disabled={isPending}/>
+      <input
+        type="text"
+        name="name"
+        value={name}
+        onChange={event => setName(event.target.value)}
+        disabled={isPending}
+      />
       {error && <span>Failed: {error}</span>}
     </form>
-  )
+  );
 }
 ```
 
 This allows you to access the `isPending` state of the Server Function by wrapping it in an Action on the client.
 
-For more, see the docs for [Calling a Server Function outside of `<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form)
+For more, see the docs for [Calling a Server Function outside of `<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form).
 
-### Server Functions with Form Actions {/*using-server-functions-with-form-actions*/}
+### Passing a Server Function to the `<form>` `action` prop {/*using-server-functions-with-form-actions*/}
 
 Server Functions work with the new Form features in React 19.
 
-You can pass a Server Function to a Form to automatically submit the form to the server:
+Pass a Server Function to the `<form>` `action` prop to submit the form to the server. React passes the submitted [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) to the Server Function as its first argument:
 
+```js [[1, 4, "updateName"]]
+// actions.js
+"use server";
+
+export async function updateName(formData) {
+  const name = formData.get('name');
+  if (typeof name !== 'string' || !name) {
+    throw new Error('Name is required');
+  }
+  await db.users.updateName(name);
+}
+```
 
-```js [[1, 3, "updateName"], [1, 7, "updateName"]]
+```js [[1, 4, "updateName"], [1, 8, "updateName"]]
+// UpdateName.js
 "use client";
 
 import {updateName} from './actions';
@@ -166,21 +191,37 @@ function UpdateName() {
     <form action={updateName}>
       <input type="text" name="name" />
     </form>
-  )
+  );
 }
 ```
 
-When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
+When the Server Function passed to the `<form>` `action` prop succeeds, React automatically resets the form's uncontrolled fields. Users can submit the form before its JavaScript bundle loads. Use `useActionState` to access the Action's pending state and most recent return value.
 
 For more, see the docs for [Server Functions in Forms](/reference/rsc/use-server#server-functions-in-forms).
 
-### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/}
+### Calling a Server Function with `useActionState` {/*server-functions-with-use-action-state*/}
+
+Call a Server Function with `useActionState` to access the Action's pending state and most recent return value. The Server Function receives the previous state as its first argument and the submitted [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) as its second argument. Its return value becomes the next state:
+
+```js [[1, 4, "updateName"]]
+// actions.js
+"use server";
 
-You can call Server Functions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
+export async function updateName(previousState, formData) {
+  const name = formData.get('name');
+  if (typeof name !== 'string' || !name) {
+    return {error: 'Name is required'};
+  }
+  await db.users.updateName(name);
+  return {error: null};
+}
+```
 
-```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
+```js [[1, 5, "updateName"], [1, 8, "updateName"], [2, 8, "submitAction"], [2, 11, "submitAction"]]
+// UpdateName.js
 "use client";
 
+import {useActionState} from 'react';
 import {updateName} from './actions';
 
 function UpdateName() {
@@ -188,28 +229,30 @@ function UpdateName() {
 
   return (
     <form action={submitAction}>
-      <input type="text" name="name" disabled={isPending}/>
+      <input type="text" name="name" disabled={isPending} />
       {state.error && <span>Failed: {state.error}</span>}
     </form>
   );
 }
 ```
 
-When using `useActionState` with Server Functions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
+When the function passed to `useActionState` is a Server Function, users can submit the form before hydration finishes. React can display the Server Function's return value before JavaScript loads.
 
 For more, see the docs for [`useActionState`](/reference/react/useActionState).
 
-### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
+### Supporting progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
 
 Server Functions also support progressive enhancement with the third argument of `useActionState`.
 
-```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
+```js [[1, 5, "updateName"], [1, 8, "updateName"], [2, 8, "/name/update"], [3, 8, "submitAction"], [3, 11, "submitAction"]]
+// UpdateName.js
 "use client";
 
+import {useActionState} from 'react';
 import {updateName} from './actions';
 
 function UpdateName() {
-  const [, submitAction] = useActionState(updateName, null, `/name/update`);
+  const [, submitAction] = useActionState(updateName, {error: null}, `/name/update`);
 
   return (
     <form action={submitAction}>
@@ -219,6 +262,6 @@ function UpdateName() {
 }
 ```
 
-When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
+If you pass the <CodeStep step={2}>`permalink`</CodeStep> to `useActionState`, the browser navigates to that URL when the form is submitted before the JavaScript bundle loads. At the destination, render the same form component with the same Server Function and `permalink` so React can pass the returned state to it.
 
 For more, see the docs for [`useActionState`](/reference/react/useActionState).

From c1178e2c42d8b12a4415bff0ba48dfa928967f9e Mon Sep 17 00:00:00 2001
From: MaxwellCohen <to.email.max@gmail.com>
Date: Wed, 4 Nov 2026 18:26:46 -0600
Subject: [PATCH 10/44] Update form documentation for forms default reset
 behavior (#8512)

* Enhance form documentation for form default reset behavior

* Reorder sections for better progressive disclosure of ideas

* fix typos in form.md

* Normalize MDN links in form.md

* Standardized all Usage headings in form.md to imperative form

* add useOptimistic reference

* Standardize section headings in form.md to imperative form

* revert 'action' prop change

* Enhance form submission documentation by clarifying the use of the `action` prop and its behavior:
- including the handling of `FormData`,
- the necessity of `name` attributes,
- the advantages of using a function over a URL.
- removed redundant information about `e.preventDefault()` for the `action` prop.

* clean up Handling form submission with an action prop

* clean up preserving form values after submission

* update code example for Handling multiple submission types

* Clean up code example for Handling multiple submission types

* update form documentation with more examples of keeping form values after submission

* add useFormStatus to benefits of using Action

* Move reset form section to the bottom of the page and update examples

* updates based on pr feedback

* Enhance form documentation by clarifying the `action` and `method` props, including details on handling form submissions with functions and the implications of using `formAction`. Update examples and caveats for better understanding of form behavior in React.

* small cleanups

* Refine form Action documentation

* update Preserving form values after an Action section based on feedback

* update on onSubmit vs action prop note

* Enhance form documentation by expanding on the use of Server Functions in the `action` prop, including detailed examples for passing extra data and handling form submissions. Clarify the behavior of form elements and their interaction with `FormData`.

* fixing onSubmit link and code example clean up

* remove unneeded hidden items

* Polish form documentation wording

* Restore Transition link in form docs

* Clarify form value preservation examples and guidance

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
---
 .../reference/react-dom/components/form.md    | 475 ++++++++++++++----
 src/content/reference/react/useActionState.md |  63 ++-
 src/content/reference/rsc/server-functions.md |   2 +
 3 files changed, 435 insertions(+), 105 deletions(-)

diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 10e9c6794..459c27e0b 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -38,21 +38,27 @@ To create interactive controls for submitting information, render the [built-in
 
 `<form>` supports all [common element props.](/reference/react-dom/components/common#common-props)
 
-[`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): a URL or function. When a URL is passed to `action` the form will behave like the HTML form component. When a function is passed to `action` the function will handle the form submission in a Transition following [the Action prop pattern](/reference/react/useTransition#exposing-action-props-from-components). The function passed to `action` may be async and will be called with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form. The `action` prop can be overridden by a `formAction` attribute on a `<button>`, `<input type="submit">`, or `<input type="image">` component.
+* [`action`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action): A string containing a URL, or a function. If you pass a URL, the form behaves like a standard HTML form. If you pass a function, it handles the submission. See [Handling form submission with an action prop](#handle-form-submission-with-an-action-prop).
+  * If you pass a function to `action`, React runs it in a [Transition](/reference/react/useTransition) following [the Action prop pattern](/reference/react/useTransition#exposing-action-props-from-components).
+  * The function may be async. React calls it with a single argument containing the [form data](https://developer.mozilla.org/en-US/docs/Web/API/FormData) of the submitted form.
+  * A `formAction` prop on a `<button>`, `<input type="submit">`, or `<input type="image">` overrides this `action`.
+* [`method`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method): A string that specifies the HTTP method to use when `action` is a URL. Defaults to `get`.
+* `onSubmit`: An [`Event` handler](/reference/react-dom/components/common#react-event-object) function. Fires when the form is submitted. See [Handling form submission with an event handler](#handle-form-submission-with-an-event-handler).
 
 #### Caveats {/*caveats*/}
 
-* When a function is passed to `action` or `formAction` the HTTP method will be POST regardless of value of the `method` prop.
+* If you pass a function to `action` or `formAction`, the HTTP method will be `POST` regardless of the value of the `method` prop.
+* If you pass a function to `action` or `formAction`, React resets all [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form) field elements after the Action succeeds. See [Preserving form values after an Action](#preserve-form-values-after-an-action).
 
 ---
 
 ## Usage {/*usage*/}
 
-### Handle form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
+### Handling form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
 
-Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page, so call [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to override that behavior.
+Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page. Calling [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) in the event handler overrides this behavior.
 
-This example reads the submitted values with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), which collects every field by its `name`. This keeps the inputs [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). If you instead [control an input with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), read from that state on submit rather than from `FormData`.
+If you also pass a function to `action`, React runs it after `onSubmit` unless `onSubmit` calls `e.preventDefault()`.
 
 <Sandpack>
 
@@ -61,11 +67,9 @@ export default function Search() {
   function handleSubmit(e) {
     // Prevent the browser from reloading the page
     e.preventDefault();
-
-    // Read the form data
     const form = e.target;
     const formData = new FormData(form);
-    const query = formData.get("query");
+    const query = formData.get('query');
     alert(`You searched for '${query}'`);
   }
 
@@ -82,20 +86,31 @@ export default function Search() {
 
 <Note>
 
-Reading form data with `onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event), so you can call `e.preventDefault()` and read the data yourself. Passing the function to the `action` prop instead runs the submission in a [Transition](/reference/react/useTransition). React then tracks the pending state, sends thrown errors to the nearest error boundary, and lets the form work with [`useActionState`](/reference/react/useActionState) and [`useOptimistic`](/reference/react/useOptimistic). An `action` can also be a [Server Function](/reference/rsc/server-functions), which `onSubmit` does not support.
+`onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event). Starting in React 19, the [`action` prop](#handle-form-submission-with-an-action-prop) is the preferred API for form submissions. With `action`, React runs the submission in a [Transition](/reference/react/useTransition) and manages pending state and concurrency across multiple submissions. You can also use optimistic updates, Error Boundaries, and [Server Functions](/reference/rsc/server-functions).
 
 </Note>
 
-### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
+---
+
+### Handling form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
+
+Pass a function to the `action` prop to run it when the form is submitted. React calls the function with a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object containing the values of every input with a `name` attribute. Your inputs can be [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). You don't need `value`/`onChange` pairs, an `onSubmit` handler, or `e.preventDefault()`.
+
+When you pass a function to `action`, React:
 
-Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. Unlike `onSubmit`, an `action` runs in a [Transition](/reference/react/useTransition) and calling `e.preventDefault()` isn't needed. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
+* Runs the function in a [Transition](/reference/react/useTransition).
+* Makes the pending state available to child components via [`useFormStatus`](/reference/react-dom/hooks/useFormStatus).
+* Propagates any errors to the nearest Error Boundary.
+* Resets the form's uncontrolled fields when the function succeeds. To keep their values, see [Preserving form values after an Action](#preserve-form-values-after-an-action).
+
+Because the Action runs in a Transition, you can also use [`useActionState`](/reference/react/useActionState) to manage form state and [`useOptimistic`](/reference/react/useOptimistic) for optimistic UI. For [Server Functions](/reference/rsc/server-functions) and progressive enhancement, see [Handling form submission with a Server Function](#handle-form-submission-with-a-server-function).
 
 <Sandpack>
 
 ```js src/App.js
 export default function Search() {
   function search(formData) {
-    const query = formData.get("query");
+    const query = formData.get('query');
     alert(`You searched for '${query}'`);
   }
   return (
@@ -109,42 +124,85 @@ export default function Search() {
 
 </Sandpack>
 
-### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
+---
+
+### Handling form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
+
+A `<form>`'s `action` prop can run a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) when the user submits the form. Users can submit that form before JavaScript loads or when JavaScript is disabled. This matches how forms behave when you pass a URL to `action`.
+
+React calls the Server Function with the form's [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and includes every input with a `name` attribute. To pass additional data, such as an ID from props, see [Passing extra data to an Action](#passing-extra-data-to-an-action).
+
+```jsx
+import { addComment } from './actions.js';
+
+function CommentForm() {
+  return (
+    <form action={addComment}>
+      <textarea name="comment" />
+      <button type="submit">Comment</button>
+    </form>
+  );
+}
+```
+
+```js
+// actions.js
+'use server';
+
+export async function addComment(formData) {
+  const comment = formData.get('comment');
+  // ...
+}
+```
+
+<DeepDive>
+
+#### Passing extra data to an Action {/*passing-extra-data-to-an-action*/}
 
-Render a `<form>` with an input and submit button. Pass a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) to the `action` prop of form to run the function when the form is submitted.
+An Action receives the submitted [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData). To include data the user did not enter, such as an ID from props, use one of these approaches:
 
-Passing a Server Function to `<form action>` allow users to submit forms without JavaScript enabled or before the code has loaded. This is beneficial to users who have a slow connection, device, or have JavaScript disabled and is similar to the way forms work when a URL is passed to the `action` prop.
+* **Hidden fields** add the value to `FormData`. The value appears in the HTML, and `formData.get` returns a string. Users can submit the form before JavaScript loads.
+* **Binding with `bind`** passes the value as an argument to a Server Function, before `formData`. The argument keeps its type, so a number stays a number. It must be [serializable](/reference/rsc/use-server#serializable-parameters-and-return-values). Users can submit the form before JavaScript loads.
+* **A function in the component** reads props and state directly. It runs after JavaScript loads, then calls a Server Function with those values.
 
-You can use hidden form fields to provide data to the `<form>`'s action. The Server Function will be called with the hidden form field data as an instance of [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+The client sends hidden field values and bound arguments. Check on the server that the logged-in user is allowed to perform the Action. See [Security considerations](/reference/rsc/use-server#security).
+
+#### Hidden fields {/*passing-extra-data-hidden-fields*/}
+
+In a Server Component, render an `<input type="hidden">` with a `name` and `value`. React includes that value in the `FormData` passed to the Action.
 
 ```jsx
+// Server Component
 import { updateCart } from './lib.js';
 
-function AddToCart({productId}) {
+function AddToCart({ productId }) {
   async function addToCart(formData) {
-    'use server'
-    const productId = formData.get('productId')
-    await updateCart(productId)
+    'use server';
+    await updateCart(formData.get('productId'));
   }
   return (
     <form action={addToCart}>
-        <input type="hidden" name="productId" value={productId} />
-        <button type="submit">Add to Cart</button>
+      <input type="hidden" name="productId" value={productId} />
+      <button type="submit">Add to Cart</button>
     </form>
-
   );
 }
 ```
 
-In lieu of using hidden form fields to provide data to the `<form>`'s action, you can call the <CodeStep step={1}>`bind`</CodeStep> method to supply it with extra arguments. This will bind a new argument (<CodeStep step={2}>`productId`</CodeStep>) to the function in addition to the <CodeStep step={3}>`formData`</CodeStep> that is passed as an argument to the function.
+React includes a submit button's `name` and `value` in `FormData` when that button submits the form.
+
+#### Binding with `bind` {/*passing-extra-data-bind*/}
 
-```jsx [[1, 8, "bind"], [2,8, "productId"], [2,4, "productId"], [3,4, "formData"]]
+In a Server Component, call [`bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) on the Server Function and pass the bound function to `action`. Pass `null` as the first argument to `bind`. Each argument after `null` comes before the `formData` argument React passes when the form is submitted.
+
+```jsx
+// Server Component
 import { updateCart } from './lib.js';
 
-function AddToCart({productId}) {
+function AddToCart({ productId }) {
   async function addToCart(productId, formData) {
-    "use server";
-    await updateCart(productId)
+    'use server';
+    await updateCart(productId);
   }
   const addProductToCart = addToCart.bind(null, productId);
   return (
@@ -155,24 +213,64 @@ function AddToCart({productId}) {
 }
 ```
 
-When `<form>` is rendered by a [Server Component](/reference/rsc/use-client), and a [Server Function](/reference/rsc/server-functions) is passed to the `<form>`'s `action` prop, the form is [progressively enhanced](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement).
+When the form is submitted, React calls `addProductToCart(formData)`, which calls `addToCart(productId, formData)`.
+
+If you also use [`useActionState`](/reference/react/useActionState), the Server Function receives `productId`, `previousState`, and `formData`, in that order. Define that function in a separate file and bind it from the Client Component.
+
+#### A function in the component {/*passing-extra-data-function*/}
+
+Define the function passed to `action` in the Client Component so it can read the component's props or state. That function passes those values to a Server Function.
+
+```jsx
+// AddToCart.js
+'use client';
+
+import { updateCart } from './actions.js';
+
+function AddToCart({ productId }) {
+  async function addToCart(formData) {
+    await updateCart(productId, formData);
+  }
+  return (
+    <form action={addToCart}>
+      <button type="submit">Add to Cart</button>
+    </form>
+  );
+}
+```
+
+```js
+// actions.js
+'use server';
+
+export async function updateCart(productId, formData) {
+  // ...
+}
+```
+
+Because `addToCart` runs in the browser, the component's JavaScript must load before the form can submit.
+
+</DeepDive>
 
-### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
-To display a pending state when a form is being submitted, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
+---
+
+### Displaying a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
+
+To display a pending state when a form is being submitted, you can call the [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) Hook in a component rendered in a `<form>` and read the `pending` property returned.
 
 Here, we use the `pending` property to indicate the form is submitting.
 
 <Sandpack>
 
 ```js src/App.js
-import { useFormStatus } from "react-dom";
-import { submitForm } from "./actions.js";
+import { useFormStatus } from 'react-dom';
+import { submitForm } from './actions.js';
 
 function Submit() {
   const { pending } = useFormStatus();
   return (
     <button type="submit" disabled={pending}>
-      {pending ? "Submitting..." : "Submit"}
+      {pending ? 'Submitting...' : 'Submit'}
     </button>
   );
 }
@@ -191,31 +289,33 @@ export default function App() {
 ```
 
 ```js src/actions.js hidden
-export async function submitForm(query) {
-    await new Promise((res) => setTimeout(res, 1000));
+export async function submitForm(formData) {
+  await new Promise((res) => setTimeout(res, 1000));
 }
 ```
 
 </Sandpack>
 
-To learn more about the `useFormStatus` Hook see the [reference documentation](/reference/react-dom/hooks/useFormStatus).
+To learn more about the `useFormStatus` Hook, see the [reference documentation](/reference/react-dom/hooks/useFormStatus).
+
+---
 
 ### Optimistically updating form data {/*optimistically-updating-form-data*/}
-The `useOptimistic` Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome.
+
+The [`useOptimistic`](/reference/react/useOptimistic) Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive. When a user submits a form, instead of waiting for the server's response to reflect the changes, the interface is immediately updated with the expected outcome.
 
 For example, when a user types a message into the form and hits the "Send" button, the `useOptimistic` Hook allows the message to immediately appear in the list with a "Sending..." label, even before the message is actually sent to a server. This "optimistic" approach gives the impression of speed and responsiveness. The form then attempts to truly send the message in the background. Once the server confirms the message has been received, the "Sending..." label is removed.
 
 <Sandpack>
 
-
 ```js src/App.js
-import { useOptimistic, useState, useRef } from "react";
-import { deliverMessage } from "./actions.js";
+import { startTransition, useOptimistic, useState, useRef } from 'react';
+import { deliverMessage } from './actions.js';
 
 function Thread({ messages, sendMessage }) {
-  const formRef = useRef();
+  const formRef = useRef(null);
   async function formAction(formData) {
-    addOptimisticMessage(formData.get("message"));
+    addOptimisticMessage(formData.get('message'));
     formRef.current.reset();
     await sendMessage(formData);
   }
@@ -248,11 +348,13 @@ function Thread({ messages, sendMessage }) {
 
 export default function App() {
   const [messages, setMessages] = useState([
-    { text: "Hello there!", sending: false, key: 1 }
+    { text: 'Hello there!', sending: false, key: 1 }
   ]);
   async function sendMessage(formData) {
-    const sentMessage = await deliverMessage(formData.get("message"));
-    setMessages((messages) => [...messages, { text: sentMessage }]);
+    const sentMessage = await deliverMessage(formData.get('message'));
+    startTransition(() => {
+      setMessages((messages) => [...messages, { text: sentMessage }]);
+    });
   }
   return <Thread messages={messages} sendMessage={sendMessage} />;
 }
@@ -260,6 +362,7 @@ export default function App() {
 
 ```js src/actions.js
 export async function deliverMessage(message) {
+  // Simulate a message delivery delay
   await new Promise((res) => setTimeout(res, 1000));
   return message;
 }
@@ -267,21 +370,22 @@ export async function deliverMessage(message) {
 
 </Sandpack>
 
-[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentation page is published'
-[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).'
+To learn more about the `useOptimistic` Hook, see the [reference documentation](/reference/react/useOptimistic).
+
+---
 
 ### Handling form submission errors {/*handling-form-submission-errors*/}
 
-In some cases the function called by a `<form>`'s `action` prop throws an error. You can handle these errors by wrapping `<form>` in an Error Boundary. If the function called by a `<form>`'s `action` prop throws an error, the fallback for the error boundary will be displayed.
+To handle errors thrown by a function passed to a `<form>`'s `action` prop, wrap the form in an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). React displays the boundary's fallback when the function throws.
 
 <Sandpack>
 
 ```js src/App.js
-import { ErrorBoundary } from "react-error-boundary";
+import { ErrorBoundary } from 'react-error-boundary';
 
 export default function Search() {
   function search() {
-    throw new Error("search error");
+    throw new Error('search error');
   }
   return (
     <ErrorBoundary
@@ -294,106 +398,263 @@ export default function Search() {
     </ErrorBoundary>
   );
 }
-
 ```
 
 ```json package.json hidden
 {
   "dependencies": {
-    "react": "19.0.0-rc-3edc000d-20240926",
-    "react-dom": "19.0.0-rc-3edc000d-20240926",
-    "react-scripts": "^5.0.0",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
     "react-error-boundary": "4.0.3"
   },
-  "main": "/index.js",
-  "devDependencies": {}
+  "main": "/index.js"
 }
 ```
 
 </Sandpack>
 
-### Display a form submission error without JavaScript {/*display-a-form-submission-error-without-javascript*/}
+#### Handling form submission errors before JavaScript loads {/*display-a-form-submission-error-without-javascript*/}
 
 Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
 
 1. `<form>` be rendered by a [Client Component](/reference/rsc/use-client)
 1. the function passed to the `<form>`'s `action` prop be a [Server Function](/reference/rsc/server-functions)
-1. the `useActionState` Hook be used to display the error message
+1. the [`useActionState`](/reference/react/useActionState) Hook be used to display the error message
+
+Define the Server Function in a separate file with the [`'use server'`](/reference/rsc/use-server) directive. It receives the previous state followed by the submitted `FormData`:
+
+```js
+// actions.js
+'use server';
+
+import { signUpNewUser } from './api.js';
+
+export async function signup(previousState, formData) {
+  const email = formData.get('email');
+  try {
+    await signUpNewUser(email);
+    return null;
+  } catch (error) {
+    return error.message;
+  }
+}
+```
+
+In a Client Component, pass the Server Function to `useActionState`. Pass the returned Action to the form's `action` prop and render the returned state:
+
+```js
+// Signup.js
+'use client';
 
-`useActionState` takes two parameters: a [Server Function](/reference/rsc/server-functions) and an initial state. `useActionState` returns two values, a state variable and an action. The action returned by `useActionState` should be passed to the `action` prop of the form. The state variable returned by `useActionState` can be used to display an error message. The value returned by the Server Function passed to `useActionState` will be used to update the state variable.
+import { useActionState } from 'react';
+import { signup } from './actions.js';
+
+export default function Signup() {
+  const [message, signupAction] = useActionState(signup, null);
+  return (
+    <form action={signupAction}>
+      <label htmlFor="email">Email: </label>
+      <input name="email" id="email" placeholder="react@example.com" />
+      <button>Sign up</button>
+      {message && <p>{message}</p>}
+    </form>
+  );
+}
+```
+
+If the form is submitted before JavaScript loads, React includes the Server Function's returned error message in the server-rendered response.
+
+---
+
+### Preserving form values after an Action {/*preserve-form-values-after-an-action*/}
+
+When a function passed to `action` or `formAction` completes without throwing, React resets the form's [uncontrolled fields](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). You may want to keep the submitted values after saving edits, or when the Action returns a [validation error](/reference/react/useActionState#displaying-validation-errors-and-preserving-form-values).
+
+To preserve those values, you can store them with [`useState`](/reference/react/useState) and pass them to each field's [`defaultValue`](/reference/react-dom/components/input#providing-an-initial-value-for-an-input). Update the state when the Action finishes. React applies the updated defaults before resetting the form, so the fields keep those values.
+
+Try changing the title and clicking **Save**. In this example, [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) shows "Saving..." during a simulated one-second request. Then `setTitle` updates the saved title and preserves it in the input.
 
 <Sandpack>
 
 ```js src/App.js
-import { useActionState } from "react";
-import { signUpNewUser } from "./api";
-
-export default function Page() {
-  async function signup(prevState, formData) {
-    "use server";
-    const email = formData.get("email");
-    try {
-      await signUpNewUser(email);
-      alert(`Added "${email}"`);
-    } catch (err) {
-      return err.toString();
-    }
+import { startTransition, useState } from 'react';
+import SaveButton from './SaveButton.js';
+
+export default function EditForm() {
+  const [title, setTitle] = useState('My draft');
+
+  async function saveAction(formData) {
+    await new Promise((res) => setTimeout(res, 1000));
+    startTransition(() => {
+      setTitle(formData.get('title'));
+    });
   }
-  const [message, signupAction] = useActionState(signup, null);
+
   return (
-    <>
-      <h1>Signup for my newsletter</h1>
-      <p>Signup with the same email twice to see an error</p>
-      <form action={signupAction} id="signup-form">
-        <label htmlFor="email">Email: </label>
-        <input name="email" id="email" placeholder="react@example.com" />
-        <button>Sign up</button>
-        {!!message && <p>{message}</p>}
-      </form>
-    </>
+    <form action={saveAction}>
+      <input name="title" defaultValue={title} />
+      <SaveButton />
+      <p>Saved title: {title}</p>
+    </form>
   );
 }
 ```
 
-```js src/api.js hidden
-let emails = [];
+```js src/SaveButton.js hidden
+import { useFormStatus } from 'react-dom';
 
-export async function signUpNewUser(newEmail) {
-  if (emails.includes(newEmail)) {
-    throw new Error("This email address has already been added");
-  }
-  emails.push(newEmail);
+export default function SaveButton() {
+  const { pending } = useFormStatus();
+  return (
+    <button type="submit" disabled={pending}>
+      {pending ? 'Saving...' : 'Save'}
+    </button>
+  );
 }
 ```
 
 </Sandpack>
 
-Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs
+The call to `setTitle` [after `await`](/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition) needs another [`startTransition`](/reference/react/startTransition) to mark it as a Transition update.
 
-### Handling multiple submission types {/*handling-multiple-submission-types*/}
+`saveAction` can also call a [Server Function](/reference/rsc/server-functions) and store its return value:
+
+```js
+// actions.js
+'use server';
+
+import { saveTitle } from './api.js';
+
+export async function submitTitle(formData) {
+  const title = formData.get('title');
+  await saveTitle(title);
+  return title;
+}
+```
+
+Add [`'use client'`](/reference/rsc/use-client) at the top of the component's file, import `submitTitle`, and replace `saveAction`. The rest of the form stays the same:
+
+```js
+import { submitTitle } from './actions.js';
+
+async function saveAction(formData) {
+  const savedTitle = await submitTitle(formData);
+  startTransition(() => {
+    setTitle(savedTitle);
+  });
+}
+```
+
+#### Preserving form values before JavaScript loads {/*preserving-form-values-before-javascript-loads*/}
 
-Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
+With [`useActionState`](/reference/react/useActionState), React can display a [Server Function](/reference/rsc/server-functions)'s returned value before hydration completes. The form can use those values as its new defaults. In a [Client Component](/reference/rsc/use-client), `useActionState` receives the Server Function and returns an Action for the form's `action` prop.
 
-When a user taps a specific button, the form is submitted, and a corresponding action, defined by that button's attributes and action, is executed. For instance, a form might submit an article for review by default but have a separate button with `formAction` set to save the article as a draft.
+See [Handling form submission errors before JavaScript loads](#display-a-form-submission-error-without-javascript) for the same behavior with errors.
+
+The Server Function receives the previous state followed by the submitted `FormData`. In this example, `updateTitle` saves the title and returns `{ title }`, which becomes the new state. Passing `state.title` to `defaultValue` preserves the saved title after the reset:
+
+```js
+// actions.js
+'use server';
+
+import { saveTitle } from './api.js';
+
+export async function updateTitle(previousState, formData) {
+  const title = formData.get('title');
+  await saveTitle(title);
+  return { title };
+}
+```
+
+```js
+// EditForm.js
+'use client';
+
+import { useActionState } from 'react';
+import { updateTitle } from './actions.js';
+
+export default function EditForm() {
+  const [state, updateTitleAction, isPending] = useActionState(updateTitle, {
+    title: 'My draft',
+  });
+
+  return (
+    <form action={updateTitleAction}>
+      <input name="title" defaultValue={state.title} />
+      <button type="submit" disabled={isPending}>
+        {isPending ? 'Saving...' : 'Save'}
+      </button>
+    </form>
+  );
+}
+```
+
+<DeepDive>
+
+#### Other ways to control form resets {/*other-ways-to-control-form-resets*/}
+
+The examples above keep every submitted value by storing it before the reset. You can also choose which values survive, or when the reset runs:
+
+* **Keep values only when validation fails.** Return the same state shape from every submission. When validation fails, include the submitted `FormData` and read each field with `state.submitted?.get('title') ?? ''`. When validation succeeds, set that `FormData` to `null` so the reset clears those fields. [`useActionState`](/reference/react/useActionState#displaying-validation-errors-and-preserving-form-values) shows this pattern.
+
+* **Skip the reset with `onSubmit`.** Handle the submission in `onSubmit`, call `e.preventDefault()`, and run the Action inside [`startTransition`](/reference/react/useTransition). Because the form's `action` does not run, React does not reset the form.
+
+* **Reset at a specific moment.** Call the form element's [`reset()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) method to immediately reset uncontrolled fields to their default values. To schedule a reset as part of an Action or Transition, call [`requestFormReset`](/blog/2024/12/05/react-19#form-actions) from `react-dom` instead.
+
+* **Reset the form and the component state together.** Change the [`key`](/learn/preserving-and-resetting-state#resetting-a-form-with-a-key) of the component that renders the form. React recreates the component and its DOM, which resets the fields and any local state.
+
+</DeepDive>
+
+---
+
+### Handling multiple submission types {/*handling-multiple-submission-types*/}
+
+A form can have more than one submit button, each running a different Action. A button without `formAction` runs the form's `action`; a button with `formAction` runs its own Action instead. For example, the form below publishes an article by default, but its **Save draft** button stores the current content without publishing it. It uses [`useActionState`](/reference/react/useActionState) to preserve the saved draft:
 
 <Sandpack>
 
 ```js src/App.js
-export default function Search() {
+import { useActionState } from 'react';
+
+export default function ArticleForm() {
+  // Preserve the saved draft after submission
+  const [formState, dispatchFormState] = useActionState((state, payload) => {
+    const content = payload.data.get('content');
+    switch (payload.type) {
+      case 'save':
+        alert(`Your draft of '${content}' was saved!`);
+        return payload.data;
+      case 'publish':
+        alert(`'${content}' was published!`);
+        return new FormData();
+      default:
+        return state;
+    }
+  }, new FormData());
+
   function publish(formData) {
-    const content = formData.get("content");
-    const button = formData.get("button");
-    alert(`'${content}' was published with the '${button}' button`);
+    dispatchFormState({
+      type: 'publish',
+      data: formData,
+    });
   }
 
   function save(formData) {
-    const content = formData.get("content");
-    alert(`Your draft of '${content}' has been saved!`);
+    dispatchFormState({
+      type: 'save',
+      data: formData,
+    });
   }
 
   return (
     <form action={publish}>
-      <textarea name="content" rows={4} cols={40} />
+      <textarea
+        name="content"
+        rows={4}
+        cols={40}
+        defaultValue={formState?.get('content') || ''}
+      />
       <br />
       <button type="submit" name="button" value="submit">Publish</button>
       <button formAction={save}>Save draft</button>
@@ -403,3 +664,13 @@ export default function Search() {
 ```
 
 </Sandpack>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My form fields are cleared after submission {/*my-form-fields-are-cleared-after-submission*/}
+
+When a function passed to `action` or `formAction` succeeds, React resets the form's uncontrolled fields to their default values. Text fields without a `defaultValue` become empty. Returning a validation error instead of throwing also triggers this reset.
+
+To keep a submitted value, store it in state and pass it to the field's `defaultValue`. See [Preserving form values after an Action](#preserve-form-values-after-an-action) for examples, or [preserving values when validation fails](/reference/react/useActionState#displaying-validation-errors-and-preserving-form-values).
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 581eebc63..4f23c0904 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -1184,14 +1184,71 @@ hr {
 
 In this example, when the user clicks the stepper arrows, the button submits the form and `useActionState` calls `updateCartAction` with the form data. The example uses `useOptimistic` to immediately show the new quantity while the server confirms the update.
 
+#### Displaying validation errors and preserving form values {/*displaying-validation-errors-and-preserving-form-values*/}
+
+Return validation errors and submitted values from the Action to display an error without clearing the affected fields. Try submitting a name with fewer than three characters:
+
+<Sandpack>
+
+```js src/App.js active
+import { useActionState } from 'react';
+import { updateName } from './api.js';
+
+const initialState = {
+  error: null,
+  submitted: null,
+};
+
+export default function UpdateName() {
+  const [state, submitAction, isPending] = useActionState(
+    updateName,
+    initialState
+  );
+
+  return (
+    <form action={submitAction}>
+      <label>
+        Name:{' '}
+        <input
+          name="name"
+          defaultValue={state.submitted?.get('name') ?? ''}
+          disabled={isPending}
+        />
+      </label>
+      <button type="submit" disabled={isPending}>Save</button>
+      {state.error && <p>{state.error}</p>}
+    </form>
+  );
+}
+```
+
+```js src/api.js
+export async function updateName(previousState, formData) {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  const name = formData.get('name');
+  if (typeof name !== 'string' || name.trim().length < 3) {
+    return {
+      error: 'Name must be at least three characters long',
+      submitted: formData,
+    };
+  }
+  return {
+    error: null,
+    submitted: null,
+  };
+}
+```
+
+</Sandpack>
+
+When validation fails, `updateName` returns an error and the submitted `FormData`. The component uses the submitted name as the input's new `defaultValue`, so React's automatic form reset preserves it. When validation succeeds, `submitted` is `null`, so the automatic reset clears the field.
+
 <RSC>
 
-When used with a [Server Function](/reference/rsc/server-functions), `useActionState` allows the server's response to be shown before hydration (when React attaches to server-rendered HTML) completes. You can also use the optional `permalink` parameter for progressive enhancement (allowing the form to work before JavaScript loads) on pages with dynamic content. This is typically handled by your framework for you.
+The example above runs `updateName` in the browser. To display the error and preserve the submitted name before JavaScript loads, make `updateName` a [Server Function](/reference/rsc/server-functions). Keep passing `submitAction` to the form's `action` prop. React can then display the Server Function's returned value before hydration completes. See [preserving form values before JavaScript loads](/reference/react-dom/components/form#preserving-form-values-before-javascript-loads) for the setup. On pages with dynamic content, you can also use the optional [`permalink`](#parameters) parameter for progressive enhancement.
 
 </RSC>
 
-See the [`<form>`](/reference/react-dom/components/form#handle-form-submission-with-a-server-function) docs for more information on using Actions with forms.
-
 ---
 
 ### Handling errors {/*handling-errors*/}
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index 4dfe7efb0..f232a16f7 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -240,6 +240,8 @@ When the function passed to `useActionState` is a Server Function, users can sub
 
 For more, see the docs for [`useActionState`](/reference/react/useActionState).
 
+To keep submitted values or control when the form resets, see [Preserving form values after an Action](/reference/react-dom/components/form#preserve-form-values-after-an-action).
+
 ### Supporting progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
 
 Server Functions also support progressive enhancement with the third argument of `useActionState`.

From dc8eb1ed6370b16bde0d3ea61981519e5282de09 Mon Sep 17 00:00:00 2001
From: Viktor <38476233+BlackHatMan@users.noreply.github.com>
Date: Thu, 5 Nov 2026 03:43:45 +0300
Subject: [PATCH 11/44] Fix Server Function signature and two typos in 'use
 server' reference (#8653)

requestUsername is passed to useActionState but declared as
requestUsername(formData). useActionState calls the action with the
previous state as the first argument, so formData ends up null and
formData.get('username') throws. The useActionState reference already
covers this under "My Action cannot read form data".

Also drop a stray semicolon in the LikeButton example, where it sits in
the fragment's children and renders as text, and remove a duplicated
word in the RSC banner so it matches use-client.md.
---
 src/content/reference/rsc/use-server.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md
index 27ef9ee3c..148f5130b 100644
--- a/src/content/reference/rsc/use-server.md
+++ b/src/content/reference/rsc/use-server.md
@@ -5,7 +5,7 @@ titleForTitleTag: "'use server' directive"
 
 <RSC>
 
-`'use server'` is for use with [using React Server Components](/reference/rsc/server-components).
+`'use server'` is for use with [React Server Components](/reference/rsc/server-components).
 
 </RSC>
 
@@ -139,7 +139,7 @@ To update the UI based on the result of a Server Function while supporting progr
 // requestUsername.js
 'use server';
 
-export default async function requestUsername(formData) {
+export default async function requestUsername(prevState, formData) {
   const username = formData.get('username');
   if (canRequest(username)) {
     // ...
@@ -199,7 +199,7 @@ function LikeButton() {
   return (
     <>
       <p>Total Likes: {likeCount}</p>
-      <button onClick={onClick} disabled={isPending}>Like</button>;
+      <button onClick={onClick} disabled={isPending}>Like</button>
     </>
   );
 }

From 879fe8ccf7a092152dd32726f82df0e291d0263b Mon Sep 17 00:00:00 2001
From: Willy Bruns <adde.animulis@gmail.com>
Date: Thu, 5 Nov 2026 00:44:39 +0000
Subject: [PATCH 12/44] Just fix some user-visible react.dev typos (only typos
 in this commit) (no AI or LLM used) (#8702)

Thanks to the React team for great documentation!

As a way to give back, I would like to share some simple typo fixes (any other type of content issues found will be fixed in separate commits):

- On https://react.dev/reference/react/useActionState (archived as is at https://web.archive.org/web/20261022181815/https://react.dev/reference/react/useActionState )
 "quanitiy" should be "quantity".

- On https://react.dev/reference/react/useContext (archived as is at https://web.archive.org/web/20261022181858/https://react.dev/reference/react/useContext )
 "mistakingly" should be removed (the sentence already ends in "by mistake", and "mistakenly" would seem to be the intended word if that had not been the case)

- On https://react.dev/reference/react/experimental_taintUniqueValue (archived as is at https://web.archive.org/web/20261022181913/https://react.dev/reference/react/experimental_taintUniqueValue )
 "untained" should be "untainted"

- On https://react.dev/reference/react-dom/flushSync (archived as is at https://web.archive.org/web/20261022184601/https://react.dev/reference/react-dom/flushSync )
 "syncronous" should be "synchronous"

- On https://react.dev/reference/react-dom/client/createRoot (archived as is at https://web.archive.org/web/20261022185916/https://react.dev/reference/react-dom/client/createRoot )
 "specfied" should be "specified"

- On https://react.dev/reference/react-dom/client/hydrateRoot (archived as is at https://web.archive.org/web/20261022190025/https://react.dev/reference/react-dom/client/hydrateRoot )
 "specfied" should be "specified"

- On https://react.dev/reference/react-dom/server/resume (archived as is at https://web.archive.org/web/20261022190141/https://react.dev/reference/react-dom/server/resume )
 "immediated" should be "immediately"

- https://react.dev/reference/dev-tools/react-performance-tracks (archived as is at https://web.archive.org/web/20261022190242/https://react.dev/reference/dev-tools/react-performance-tracks )
 "addititional" should be "additional"

- https://react.dev/reference/eslint-plugin-react-hooks/lints/use-memo (archived as is at https://web.archive.org/web/20261022190325/https://react.dev/reference/eslint-plugin-react-hooks/lints/use-memo )
 "sychronizes" should be "synchronizes"

- https://react.dev/versions (archived as is at https://web.archive.org/web/20261022190519/https://react.dev/versions )
 "Specificaion" should be "Specification"

- https://react.dev/reference/react/StrictMode (archived as is at https://web.archive.org/web/20261022190822/https://react.dev/reference/react/StrictMode )
 "inital" should be "initial"
---
 src/content/reference/dev-tools/react-performance-tracks.md   | 2 +-
 .../reference/eslint-plugin-react-hooks/lints/use-memo.md     | 2 +-
 src/content/reference/react-dom/client/createRoot.md          | 2 +-
 src/content/reference/react-dom/client/hydrateRoot.md         | 2 +-
 src/content/reference/react-dom/flushSync.md                  | 2 +-
 src/content/reference/react-dom/server/resume.md              | 2 +-
 src/content/reference/react/StrictMode.md                     | 2 +-
 src/content/reference/react/experimental_taintUniqueValue.md  | 2 +-
 src/content/reference/react/useActionState.md                 | 4 ++--
 src/content/reference/react/useContext.md                     | 2 +-
 src/content/versions.md                                       | 2 +-
 11 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md
index d4757b9ec..7a876061e 100644
--- a/src/content/reference/dev-tools/react-performance-tracks.md
+++ b/src/content/reference/dev-tools/react-performance-tracks.md
@@ -155,5 +155,5 @@ If you await a Promise, React will display duration of that Promise. To see all
 
 Different colors are used to indicate the duration of the component render. The darker the color, the longer the duration.
 
-The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display addititional "Parallel" tracks.
+The Server Components track group will always contain a "Primary" track. If React is able to render Server Components concurrently, it will display additional "Parallel" tracks.
 If more than 8 Server Components are rendered concurrently, React will associate them with the last "Parallel" track instead of adding more tracks.
diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
index a5a77e5f6..56810c359 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/use-memo.md
@@ -79,7 +79,7 @@ function Component({user}) {
 }
 ```
 
-If the side effect sychronizes React state with some external state (or vice versa), use `useEffect`:
+If the side effect synchronizes React state with some external state (or vice versa), use `useEffect`:
 
 ```js
 // ✅ Good: Synchronization in useEffect
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index c42f2fabf..2262af402 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -419,7 +419,7 @@ const container = document.getElementById("root");
 const root = createRoot(container, {
   // Keep in mind to remove these options in development to leverage
   // React's default handlers or implement your own overlay for development.
-  // The handlers are only specfied unconditionally here for demonstration purposes.
+  // The handlers are only specified unconditionally here for demonstration purposes.
   onCaughtError: onCaughtErrorProd,
   onRecoverableError: onRecoverableErrorProd,
   onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index 251818bc9..cb7371994 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -449,7 +449,7 @@ const container = document.getElementById("root");
 hydrateRoot(container, <App />, {
   // Keep in mind to remove these options in development to leverage
   // React's default handlers or implement your own overlay for development.
-  // The handlers are only specfied unconditionally here for demonstration purposes.
+  // The handlers are only specified unconditionally here for demonstration purposes.
   onCaughtError: onCaughtErrorProd,
   onRecoverableError: onRecoverableErrorProd,
   onUncaughtError: onUncaughtErrorProd,
diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md
index 6fe53337d..b0019868d 100644
--- a/src/content/reference/react-dom/flushSync.md
+++ b/src/content/reference/react-dom/flushSync.md
@@ -196,7 +196,7 @@ useEffect(() => {
 }, []);
 ```
 
-This will allow the current render to finish and schedule another syncronous render to flush the updates.
+This will allow the current render to finish and schedule another synchronous render to flush the updates.
 
 <Pitfall>
 
diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md
index 012d3823f..2aa2dca37 100644
--- a/src/content/reference/react-dom/server/resume.md
+++ b/src/content/reference/react-dom/server/resume.md
@@ -176,7 +176,7 @@ async function main(frame) {
   // Layer 2
   // Just waiting here for demonstration purposes.
   // In a real app, the prelude and postponed state would've been serialized in Layer 1 and Layer would deserialize them.
-  // The prelude content could be flushed immediated as plain HTML while
+  // The prelude content could be flushed immediately as plain HTML while
   // React is continuing to render from where the prerender left off.
   await sleep(2000);
 
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index 16e8d9e60..d1edaa225 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -1226,7 +1226,7 @@ li {
 
 </Sandpack>
 
-Now on inital mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again:
+Now on initial mount in StrictMode, the ref callbacks are all setup, cleaned up, and setup again:
 
 ```
 ...
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index bea4b627d..5e0d3f7ce 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -130,7 +130,7 @@ const uppercasePassword = password.toUpperCase() // `uppercasePassword` is not t
 
 In this example, the constant `password` is tainted. Then `password` is used to create a new value `uppercasePassword` by calling the `toUpperCase` method on `password`. The newly created `uppercasePassword` is not tainted.
 
-Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values.
+Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untainted values.
 
 Tainting only protects against simple mistakes like explicitly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
 
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 4f23c0904..174387acd 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -1257,7 +1257,7 @@ There are two ways to handle errors with `useActionState`.
 
 For known errors, such as "quantity not available" validation errors from your backend, you can return it as part of your `reducerAction` state and display it in the UI.
 
-For unknown errors, such as `undefined is not a function`, you can throw an error. React will cancel all queued Actions and shows the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) by rethrowing the error from the `useActionState` hook.
+For unknown errors, such as `undefined is not a function`, you can throw an error. React will cancel all queued Actions and show the nearest [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) by rethrowing the error from the `useActionState` hook.
 
 <Sandpack>
 
@@ -1273,7 +1273,7 @@ function Checkout() {
       const result = await addToCart(prevState.count, quantity);
       if (result.error) {
         // Return the error from the API as state
-        return {...prevState, error: `Could not add quanitiy ${quantity}: ${result.error}`};
+        return {...prevState, error: `Could not add quantity ${quantity}: ${result.error}`};
       }
 
       if (!isPending) {
diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md
index 022277df4..c6fdd8060 100644
--- a/src/content/reference/react/useContext.md
+++ b/src/content/reference/react/useContext.md
@@ -1366,7 +1366,7 @@ You might have a provider without a `value` in the tree:
 
 If you forget to specify `value`, it's like passing `value={undefined}`.
 
-You may have also mistakingly used a different prop name by mistake:
+You may have also used a different prop name by mistake:
 
 ```js {1,2}
 // 🚩 Doesn't work: prop should be called "value"
diff --git a/src/content/versions.md b/src/content/versions.md
index 1b883a11a..20e3dff58 100644
--- a/src/content/versions.md
+++ b/src/content/versions.md
@@ -280,7 +280,7 @@ For versions older than React 15, see [15.react.dev](https://15.react.dev).
 - [The Road to 1.0](https://legacy.reactjs.org/blog/2014/03/28/the-road-to-1.0.html)
 - [React v0.11.1](https://legacy.reactjs.org/blog/2014/07/25/react-v0.11.1.html)
 - [React v0.11.2](https://legacy.reactjs.org/blog/2014/09/16/react-v0.11.2.html)
-- [Introducing the JSX Specificaion](https://legacy.reactjs.org/blog/2014/09/03/introducing-the-jsx-specification.html)
+- [Introducing the JSX Specification](https://legacy.reactjs.org/blog/2014/09/03/introducing-the-jsx-specification.html)
 
 **Releases**
 - [v0.11.2 (September 2014)](https://github.com/react/react/blob/main/CHANGELOG.md#0112-september-16-2014)

From 02acf3be90241dc7695b9457890a869f2deb3dee Mon Sep 17 00:00:00 2001
From: Yousef Dawood <78578298+yousefdawood7@users.noreply.github.com>
Date: Thu, 5 Nov 2026 02:46:28 +0200
Subject: [PATCH 13/44] fix(docs): remove unncessary await from dispatchAction
 (#8674)

---
 src/content/reference/react/useActionState.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 174387acd..8e43e9043 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -811,20 +811,20 @@ export default function Checkout() {
   const abortRef = useRef(null);
   const [count, dispatchAction, isPending] = useActionState(updateCartAction, 0);
 
-  async function addAction() {
+  function addAction() {
     if (abortRef.current) {
       abortRef.current.abort();
     }
     abortRef.current = new AbortController();
-    await dispatchAction({ type: 'ADD', signal: abortRef.current.signal });
+    dispatchAction({ type: 'ADD', signal: abortRef.current.signal });
   }
 
-  async function removeAction() {
+  function removeAction() {
     if (abortRef.current) {
       abortRef.current.abort();
     }
     abortRef.current = new AbortController();
-    await dispatchAction({ type: 'REMOVE', signal: abortRef.current.signal });
+    dispatchAction({ type: 'REMOVE', signal: abortRef.current.signal });
   }
 
   return (

From a0039526795726b1eb3213588321f4ca8747a962 Mon Sep 17 00:00:00 2001
From: Said Nasser <sdnssr001@gmail.com>
Date: Thu, 5 Nov 2026 01:47:53 +0100
Subject: [PATCH 14/44] Link special HTML components to their React reference
 pages (#8596)

---
 src/content/reference/react-dom/components/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 454895bbd..23c9df6aa 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -100,12 +100,12 @@ React supports all built-in browser HTML components. This includes:
 * [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
 * [`<legend>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
 * [`<li>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
-* [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
+* [`<link>`](/reference/react-dom/components/link)
 * [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main)
 * [`<map>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map)
 * [`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark)
 * [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)
-* [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
+* [`<meta>`](/reference/react-dom/components/meta)
 * [`<meter>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter)
 * [`<nav>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)
 * [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)
@@ -124,7 +124,7 @@ React supports all built-in browser HTML components. This includes:
 * [`<ruby>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby)
 * [`<s>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)
 * [`<samp>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp)
-* [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
+* [`<script>`](/reference/react-dom/components/script)
 * [`<section>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section)
 * [`<select>`](/reference/react-dom/components/select)
 * [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)
@@ -132,7 +132,7 @@ React supports all built-in browser HTML components. This includes:
 * [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source)
 * [`<span>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
 * [`<strong>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong)
-* [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style)
+* [`<style>`](/reference/react-dom/components/style)
 * [`<sub>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub)
 * [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
 * [`<sup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup)
@@ -145,7 +145,7 @@ React supports all built-in browser HTML components. This includes:
 * [`<th>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th)
 * [`<thead>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead)
 * [`<time>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time)
-* [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
+* [`<title>`](/reference/react-dom/components/title)
 * [`<tr>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr)
 * [`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track)
 * [`<u>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u)

From 89e832892478bdd5da987cf111cc9de87fd493e7 Mon Sep 17 00:00:00 2001
From: Sahil Mhapsekar <saheel.mhapsekar@gmail.com>
Date: Thu, 5 Nov 2026 06:22:49 +0530
Subject: [PATCH 15/44] Update conference listings for 2026 (#8218)

* Update conference listings for 2026

* update typo for cityjs singapore 2026 website

* fix header typo for react india

* remove duplicates from past 2025 conference

* Update dates for React miami and react summit 2026

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
---
 src/content/community/conferences.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index d36043e29..3286222c3 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -91,7 +91,7 @@ April 23-24, 2026. In-person in Miami, FL, USA
 ### CityJS London 2026 {/*cityjs-london-2026*/}
 April 14-17,  2026. In-person in London
 
-[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
 
 
 ### React Paris 2026 {/*react-paris-2026*/}
@@ -108,7 +108,7 @@ February 12-13,  2026. In-person in New Delhi, India
 ### CityJS Singapore 2026 {/*cityjs-singapore-2026*/}
 February 4-6,  2026. In-person in Singapore
 
-[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+[Website](https://singapore.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
 
 ### React Advanced London 2025 {/*react-advanced-london-2025*/}
 November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)

From c763eb22f626408025be5a0db01d169f0bd66196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=B9=E3=82=8D=E3=81=97=E3=81=A6=E3=81=83?=
 <yota.tameguchi@gmail.com>
Date: Thu, 5 Nov 2026 09:53:41 +0900
Subject: [PATCH 16/44] Clarify that Transition Actions can be asynchronous
 (#8696)

* docs: clarify that Transition Actions can be asynchronous

* Keep async Action clarification focused

* Clarify sync and async Transition callbacks

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
---
 src/content/reference/react/useTransition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 6533a201b..3a0ec1534 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1684,7 +1684,7 @@ startTransition(() => {
 });
 ```
 
-The function you pass to `startTransition` must be synchronous. You can't mark an update as a Transition like this:
+The function you pass to `startTransition` can be synchronous or asynchronous. However, updates scheduled in a `setTimeout` callback aren't marked as Transitions:
 
 ```js
 startTransition(() => {

From 00de5464422e186615113bcd77d8966f340de959 Mon Sep 17 00:00:00 2001
From: Said Nasser <sdnssr001@gmail.com>
Date: Thu, 5 Nov 2026 01:58:56 +0100
Subject: [PATCH 17/44] Fix wrong link targets in react-dom docs (#8599)

---
 src/content/blog/2023/03/16/introducing-react-dev.md            | 2 +-
 src/content/reference/react-dom/client/hydrateRoot.md           | 2 +-
 .../reference/react-dom/server/resumeToPipeableStream.md        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 96d2a630d..226801fe4 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -462,7 +462,7 @@ In the [API Reference](/reference/react), every React API now has a dedicated pa
 - Built-in Hooks like [`useState`](/reference/react/useState).
 - Built-in components like [`<Suspense>`](/reference/react/Suspense).
 - Built-in browser components like [`<input>`](/reference/react-dom/components/input).
-- Framework-oriented APIs like [`renderToPipeableStream`](/reference/react-dom/server/renderToReadableStream).
+- Framework-oriented APIs like [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream).
 - Other React APIs like [`memo`](/reference/react/memo).
 
 You'll notice that every API page is split into at least two segments: *Reference* and *Usage*.
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
index cb7371994..063162d35 100644
--- a/src/content/reference/react-dom/client/hydrateRoot.md
+++ b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -124,7 +124,7 @@ Calling `root.unmount` will unmount all the components in the root and "detach"
 
 ### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/}
 
-If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/client/createRoot), you need to *hydrate* it on the client.
+If your app's HTML was generated by [`react-dom/server`](/reference/react-dom/server), you need to *hydrate* it on the client.
 
 ```js [[1, 3, "document.getElementById('root')"], [2, 3, "<App />"]]
 import { hydrateRoot } from 'react-dom/client';
diff --git a/src/content/reference/react-dom/server/resumeToPipeableStream.md b/src/content/reference/react-dom/server/resumeToPipeableStream.md
index f80cf23fc..23d3840cf 100644
--- a/src/content/reference/react-dom/server/resumeToPipeableStream.md
+++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md
@@ -16,7 +16,7 @@ const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, op
 
 <Note>
 
-This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`resume`](/reference/react-dom/server/renderToReadableStream) instead.
+This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`resume`](/reference/react-dom/server/resume) instead.
 
 </Note>
 

From 391e70b8c22b5de8b3ecabcf0bf6bc7cc408af46 Mon Sep 17 00:00:00 2001
From: SHAKIL UR REHMAN <rehmanshakil21@gmail.com>
Date: Thu, 5 Nov 2026 06:30:48 +0530
Subject: [PATCH 18/44] Use relative links, without domain, in reference docs
 (#8712)

---
 .../eslint-plugin-react-hooks/lints/set-state-in-render.md      | 2 +-
 src/content/reference/react-dom/client/createRoot.md            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
index 7517d5f92..87262949d 100644
--- a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
+++ b/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md
@@ -107,4 +107,4 @@ function Counter({max}) {
 
 Now the setter only runs in response to the click, React finishes the render normally, and `count` never crosses `max`.
 
-In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](https://react.dev/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
+In rare cases, you may need to adjust state based on information from previous renders. For those, follow [this pattern](/reference/react/useState#storing-information-from-previous-renders) of setting state conditionally.
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 2262af402..297080702 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -90,7 +90,7 @@ React will display `<App />` in the `root`, and take over managing the DOM insid
 
 * If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
 
-* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](https://react.dev/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.
+* Although rendering is synchronous once it starts, `root.render(...)` is not. This means code after `root.render()` may run before any effects (`useLayoutEffect`, `useEffect`) of that specific render are fired. This is usually fine and rarely needs adjustment. In rare cases where effect timing matters, you can wrap `root.render(...)` in [`flushSync`](/reference/react-dom/flushSync) to ensure the initial render runs fully synchronously.
 
   ```js
   const root = createRoot(document.getElementById('root'));

From 1f691ff6396d0df8fbc47cdc88afbd107559a841 Mon Sep 17 00:00:00 2001
From: Said Nasser <sdnssr001@gmail.com>
Date: Thu, 5 Nov 2026 02:03:18 +0100
Subject: [PATCH 19/44] Fix API Reference link to point to /reference/react
 (#8603)

---
 src/content/blog/2023/03/16/introducing-react-dev.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 226801fe4..5727878e3 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -42,7 +42,7 @@ When we released React Hooks in 2018, the Hooks docs assumed the reader is famil
 **The new docs teach React with Hooks from the beginning.** The docs are divided in two main sections:
 
 * **[Learn React](/learn)** is a self-paced course that teaches React from scratch.
-* **[API Reference](/reference)** provides the details and usage examples for every React API.
+* **[API Reference](/reference/react)** provides the details and usage examples for every React API.
 
 Let's have a closer look at what you can find in each section.
 

From f9e9ed30eb42ac62d4699188a3051fe27a672af3 Mon Sep 17 00:00:00 2001
From: Said Nasser <sdnssr001@gmail.com>
Date: Thu, 5 Nov 2026 02:03:52 +0100
Subject: [PATCH 20/44] Fix broken and incorrect reference links (#8600)

---
 src/content/blog/2023/03/16/introducing-react-dev.md            | 2 +-
 src/content/blog/2024/12/05/react-19.md                         | 2 +-
 src/content/reference/react-dom/index.md                        | 2 +-
 src/content/reference/react-dom/server/resume.md                | 2 +-
 .../react-dom/static/resumeAndPrerenderToNodeStream.md          | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md
index 5727878e3..8f47a1645 100644
--- a/src/content/blog/2023/03/16/introducing-react-dev.md
+++ b/src/content/blog/2023/03/16/introducing-react-dev.md
@@ -607,7 +607,7 @@ button { display: block; margin-top: 10px; }
 
 </Recipes>
 
-Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
+Some API pages also include [Troubleshooting](/reference/react/useEffect#troubleshooting) (for common problems) and [Alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives) (for deprecated APIs).
 
 We hope that this approach will make the API reference useful not only as a way to look up an argument, but as a way to see all the different things you can do with any given API—and how it connects to the other ones.
 
diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md
index 93ac0c360..1b382b1c7 100644
--- a/src/content/blog/2024/12/05/react-19.md
+++ b/src/content/blog/2024/12/05/react-19.md
@@ -389,7 +389,7 @@ For more info, see the docs for [Directives](/reference/rsc/directives).
 
 Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
 
-For more, see the docs for [React Server Actions](/reference/rsc/server-actions).
+For more, see the docs for [React Server Actions](/reference/rsc/server-functions).
 
 ## Improvements in React 19 {/*improvements-in-react-19*/}
 
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index daf829017..6ba5cdc93 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -54,6 +54,6 @@ These APIs were removed in React 19:
 * [`findDOMNode`](https://18.react.dev/reference/react-dom/findDOMNode): see [alternatives](https://18.react.dev/reference/react-dom/findDOMNode#alternatives).
 * [`hydrate`](https://18.react.dev/reference/react-dom/hydrate): use [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead.
 * [`render`](https://18.react.dev/reference/react-dom/render): use [`createRoot`](/reference/react-dom/client/createRoot) instead.
-* [`unmountComponentAtNode`](/reference/react-dom/unmountComponentAtNode): use [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) instead.
+* [`unmountComponentAtNode`](https://18.react.dev/reference/react-dom/unmountComponentAtNode): use [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount) instead.
 * [`renderToNodeStream`](https://18.react.dev/reference/react-dom/server/renderToNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.
 * [`renderToStaticNodeStream`](https://18.react.dev/reference/react-dom/server/renderToStaticNodeStream): use [`react-dom/server`](/reference/react-dom/server) APIs instead.
diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md
index 2aa2dca37..f8b2fc4f0 100644
--- a/src/content/reference/react-dom/server/resume.md
+++ b/src/content/reference/react-dom/server/resume.md
@@ -16,7 +16,7 @@ const stream = await resume(reactNode, postponedState, options?)
 
 <Note>
 
-This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`resumeToNodeStream`](/reference/react-dom/server/renderToPipeableStream) instead.
+This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) instead.
 
 </Note>
 
diff --git a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
index 018fcf6d3..5722f2cbd 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
@@ -57,7 +57,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 `resumeAndPrerenderToNodeStream` returns a Promise:
 - If rendering the is successful, the Promise will resolve to an object containing:
   - `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
-  - `postponed`: an JSON-serializeable, opaque object that can be passed to [`resumeToNodeStream`](/reference/react-dom/server/resume) or [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) if `resumeAndPrerenderToNodeStream` is aborted.
+  - `postponed`: an JSON-serializeable, opaque object that can be passed to [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) or [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) if `resumeAndPrerenderToNodeStream` is aborted.
 - If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
 
 #### Caveats {/*caveats*/}

From b87d2bdcc971b658302168af7cc4e972c883f39e Mon Sep 17 00:00:00 2001
From: Said Nasser <sdnssr001@gmail.com>
Date: Thu, 5 Nov 2026 02:11:29 +0100
Subject: [PATCH 21/44] Fix redundant /index in static API links (#8602)

---
 src/content/reference/react-dom/server/resume.md                | 2 +-
 .../reference/react-dom/server/resumeToPipeableStream.md        | 2 +-
 src/content/reference/react-dom/static/resumeAndPrerender.md    | 2 +-
 .../react-dom/static/resumeAndPrerenderToNodeStream.md          | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react-dom/server/resume.md b/src/content/reference/react-dom/server/resume.md
index f8b2fc4f0..bc22c1fe0 100644
--- a/src/content/reference/react-dom/server/resume.md
+++ b/src/content/reference/react-dom/server/resume.md
@@ -44,7 +44,7 @@ async function handler(request, writable) {
 #### Parameters {/*parameters*/}
 
 * `reactNode`: The React node you called `prerender` with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
-* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
+* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
diff --git a/src/content/reference/react-dom/server/resumeToPipeableStream.md b/src/content/reference/react-dom/server/resumeToPipeableStream.md
index 23d3840cf..c15e71e14 100644
--- a/src/content/reference/react-dom/server/resumeToPipeableStream.md
+++ b/src/content/reference/react-dom/server/resumeToPipeableStream.md
@@ -47,7 +47,7 @@ async function handler(request, response) {
 #### Parameters {/*parameters*/}
 
 * `reactNode`: The React node you called `prerender` with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
-* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
+* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
   * **optional** `nonce`: A [`nonce`](http://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#nonce) string to allow scripts for [`script-src` Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src).
   * **optional** `onAllReady`: A callback that fires when all rendering is complete, including both the shell and all additional content. You can call `pipe` here instead of in `onShellReady` for crawlers and static generation. The stream will contain the final HTML.
diff --git a/src/content/reference/react-dom/static/resumeAndPrerender.md b/src/content/reference/react-dom/static/resumeAndPrerender.md
index a0191aae3..2a9917d43 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerender.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerender.md
@@ -50,7 +50,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 #### Parameters {/*parameters*/}
 
 * `reactNode`: The React node you called `prerender` (or a previous `resumeAndPrerender`) with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
-* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
+* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
   * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
diff --git a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
index 5722f2cbd..6645a1f8f 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
@@ -46,7 +46,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 #### Parameters {/*parameters*/}
 
 * `reactNode`: The React node you called `prerender` (or a previous `resumeAndPrerenderToNodeStream`) with. For example, a JSX element like `<App />`. It is expected to represent the entire document, so the `App` component should render the `<html>` tag.
-* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3).
+* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static), loaded from wherever you stored it (e.g. redis, a file, or S3).
 * **optional** `options`: An object with streaming options.
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client.
   * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)

From 2e6dca162985d438d7a834b339d89177cf0a92b9 Mon Sep 17 00:00:00 2001
From: Felix <146006641+Felix-ming@users.noreply.github.com>
Date: Thu, 5 Nov 2026 09:36:34 +0800
Subject: [PATCH 22/44] docs: explain useFormStatus with custom form actions
 (#8683)

* docs: explain useFormStatus with custom form actions

Closes #8682.

Document when `useFormStatus().pending` is set for a `preventDefault()` submit handler that starts a Transition in the same event, and add a runnable example for a custom form action. The example also notes that this pattern does not reset the form automatically.

Validation: `yarn check-all` and `git diff --check` pass locally. The initial draft was prepared with AI assistance and reviewed against the React DOM tests and issue details.

* Polish useFormStatus onSubmit documentation

* Clarify pending status and link form reset guidance

* Shorten pending definition and link onSubmit guidance

* Link form submission and Transition references

* Make form pending-state headings parallel

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
---
 .../react-dom/hooks/useFormStatus.md          | 63 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
index 7517d8ae2..d20853513 100644
--- a/src/content/reference/react-dom/hooks/useFormStatus.md
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -54,7 +54,7 @@ In the above example, `Submit` uses this information to disable `<button>` press
 
 A `status` object with the following properties:
 
-* `pending`: A boolean. If `true`, this means the parent `<form>` is pending submission. Otherwise, `false`.
+* `pending`: A boolean. `true` while the parent `<form>` is submitting an Action or [running a Transition from `onSubmit`](#display-a-pending-state-with-an-onsubmit-handler). Otherwise, `false`.
 
 * `data`: An object implementing the [`FormData interface`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) that contains the data the parent `<form>` is submitting. If there is no active submission or no parent `<form>`, it will be `null`.
 
@@ -72,7 +72,7 @@ A `status` object with the following properties:
 
 ## Usage {/*usage*/}
 
-### Display a pending state during form submission {/*display-a-pending-state-during-form-submission*/}
+### Display a pending state with an `action` prop {/*display-a-pending-state-during-form-submission*/}
 To display a pending state while a form is submitting, you can call the `useFormStatus` Hook in a component rendered in a `<form>` and read the `pending` property returned.
 
 Here, we use the `pending` property to indicate the form is submitting.
@@ -112,6 +112,65 @@ export async function submitForm(query) {
 ```
 </Sandpack>
 
+---
+
+### Display a pending state with an `onSubmit` handler {/*display-a-pending-state-with-an-onsubmit-handler*/}
+
+If you need to handle form submission in an `onSubmit` event handler instead of passing a function to the [`<form action>` prop](/reference/react-dom/components/form#handle-form-submission-with-an-action-prop), call [`event.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) and [start a Transition](/reference/react/startTransition) in the same event handler. A component inside the form can then use `useFormStatus` to read the pending state while the Action is running.
+
+<Sandpack>
+
+```js src/App.js
+import { startTransition } from 'react';
+import { useFormStatus } from 'react-dom';
+import { submitForm } from './submitForm.js';
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+  return (
+    <button type='submit' disabled={pending}>
+      {pending ? 'Submitting...' : 'Submit'}
+    </button>
+  );
+}
+
+function Form({ submitAction }) {
+  function handleSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    startTransition(async () => {
+      await submitAction(formData);
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input name='query' />
+      <SubmitButton />
+    </form>
+  );
+}
+
+export default function App() {
+  async function submitAction(formData) {
+    await submitForm(formData);
+  }
+
+  return <Form submitAction={submitAction} />;
+}
+```
+
+```js src/submitForm.js hidden
+export async function submitForm(formData) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+}
+```
+
+</Sandpack>
+
+Unlike a function passed to the `<form action>` prop, handling submission this way [does not automatically reset the form](/reference/react-dom/components/form#other-ways-to-control-form-resets).
+
+
 <Pitfall>
 
 ##### `useFormStatus` will not return status information for a `<form>` rendered in the same component. {/*useformstatus-will-not-return-status-information-for-a-form-rendered-in-the-same-component*/}

From dd5e98cc6417d52e88cc03d519b751df70a8bf71 Mon Sep 17 00:00:00 2001
From: Homura <1158270624@qq.com>
Date: Sun, 8 Nov 2026 04:32:37 +0800
Subject: [PATCH 23/44] Fix relative links missing leading slash in Learn docs
 (#8568)

Four links in Learn docs were missing the leading slash and would resolve to 404 paths. Every other internal link in the repo uses absolute paths.
---
 src/content/learn/preserving-and-resetting-state.md  | 2 +-
 src/content/learn/react-compiler/introduction.md     | 2 +-
 src/content/learn/setup.md                           | 2 +-
 src/content/learn/understanding-your-ui-as-a-tree.md | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 685f63ef4..47042cbc4 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -18,7 +18,7 @@ State is isolated between components. React keeps track of which state belongs t
 
 ## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
+React builds [render trees](/learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
 
 When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
 
diff --git a/src/content/learn/react-compiler/introduction.md b/src/content/learn/react-compiler/introduction.md
index ff5d6eae4..2b6b26d38 100644
--- a/src/content/learn/react-compiler/introduction.md
+++ b/src/content/learn/react-compiler/introduction.md
@@ -144,7 +144,7 @@ However, if `expensivelyProcessAReallyLargeArrayOfObjects` is truly an expensive
 - React Compiler only memoizes React components and hooks, not every function
 - React Compiler's memoization is not shared across multiple components or hooks
 
-So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
+So if `expensivelyProcessAReallyLargeArrayOfObjects` was used in many different components, even if the same exact items were passed down, that expensive calculation would be run repeatedly. We recommend [profiling](/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive) first to see if it really is that expensive before making code more complicated.
 </DeepDive>
 
 ## Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
diff --git a/src/content/learn/setup.md b/src/content/learn/setup.md
index 2c46ee148..b93155cc1 100644
--- a/src/content/learn/setup.md
+++ b/src/content/learn/setup.md
@@ -17,7 +17,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. [Le
 
 ## React Developer Tools {/*react-developer-tools*/}
 
-React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](learn/react-developer-tools).
+React Developer Tools is a browser extension that can inspect React components, edit props and state, and identify performance problems. Learn how to install it [here](/learn/react-developer-tools).
 
 ## React Compiler {/*react-compiler*/}
 
diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md
index afc38cd33..497eb48de 100644
--- a/src/content/learn/understanding-your-ui-as-a-tree.md
+++ b/src/content/learn/understanding-your-ui-as-a-tree.md
@@ -135,7 +135,7 @@ The root node in a React render tree is the [root component](/learn/importing-an
 
 #### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/}
 
-You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks).
+You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](/learn/your-first-component#components-ui-building-blocks).
 
 React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).
 

From 058f80516c1f80779c8c9a27ec6f19e0f92d0a4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ashutosh=20Kumar=20Singh=20=E7=8E=8B?=
 <161562995+Ashutosh0x@users.noreply.github.com>
Date: Sun, 8 Nov 2026 02:04:10 +0530
Subject: [PATCH 24/44] fix: consistent note object type in Server Components
 docs (#8475)

Fixes #6933

The Server Components docs page had inconsistent handling of the note variable across 3 code examples. All examples now consistently treat note as an object with .authorId, .id, and .content properties.
---
 src/content/reference/rsc/server-components.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/rsc/server-components.md b/src/content/reference/rsc/server-components.md
index a54306e43..bcb7c6cc3 100644
--- a/src/content/reference/rsc/server-components.md
+++ b/src/content/reference/rsc/server-components.md
@@ -100,7 +100,7 @@ Without Server Components, it's common to fetch dynamic data on the client in an
 ```js
 // bundle.js
 function Note({id}) {
-  const [note, setNote] = useState('');
+  const [note, setNote] = useState(null);
   // NOTE: loads *after* first render.
   useEffect(() => {
     fetch(`/api/notes/${id}`).then(data => {
@@ -108,10 +108,14 @@ function Note({id}) {
     });
   }, [id]);
 
+  if (!note) {
+    return null;
+  }
+
   return (
     <div>
       <Author id={note.authorId} />
-      <p>{note}</p>
+      <p>{note.content}</p>
     </div>
   );
 }
@@ -155,7 +159,7 @@ async function Note({id}) {
   return (
     <div>
       <Author id={note.authorId} />
-      <p>{note}</p>
+      <p>{note.content}</p>
     </div>
   );
 }
@@ -302,7 +306,7 @@ async function Page({id}) {
   const commentsPromise = db.comments.get(note.id);
   return (
     <div>
-      {note}
+      <p>{note.content}</p>
       <Suspense fallback={<p>Loading Comments...</p>}>
         <Comments commentsPromise={commentsPromise} />
       </Suspense>

From 523831c1d630388d4f4802ba40a9bc130d029de6 Mon Sep 17 00:00:00 2001
From: Amulya Kumar <52869803+Amulya-Kumar@users.noreply.github.com>
Date: Sun, 8 Nov 2026 02:04:35 +0530
Subject: [PATCH 25/44] Fix effect event name on useEffectEvent reference docs
 (#8303)

---
 src/content/reference/react/useEffectEvent.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useEffectEvent.md b/src/content/reference/react/useEffectEvent.md
index 97a659138..968f808c6 100644
--- a/src/content/reference/react/useEffectEvent.md
+++ b/src/content/reference/react/useEffectEvent.md
@@ -105,7 +105,7 @@ useEffect(() => {
 }, [roomId]);
 ```
 
-Since `onConnected` is an <CodeStep step={1}>Effect Event</CodeStep>, `muted` and `onConnect` are not in the Effect dependencies.
+Since `onConnected` is an <CodeStep step={1}>Effect Event</CodeStep>, `muted` and `onConnected` are not in the Effect dependencies.
 
 <Pitfall>
 

From 557ce1d57d55dcd88ec2799fc6244a37b13f800c Mon Sep 17 00:00:00 2001
From: Eknath <eknath789@gmail.com>
Date: Sun, 8 Nov 2026 02:05:18 +0530
Subject: [PATCH 26/44] Fix duplicate words in reference docs (#8626)

Remove accidental repeated words in three reference pages:
- createRoot: 'can can' -> 'can'
- resumeAndPrerenderToNodeStream: 'a a' -> 'a'
- react-performance-tracks: 'the the' -> 'the'

Co-authored-by: eknathdj <eknathdj@users.noreply.github.com>
---
 src/content/reference/dev-tools/react-performance-tracks.md     | 2 +-
 src/content/reference/react-dom/client/createRoot.md            | 2 +-
 .../react-dom/static/resumeAndPrerenderToNodeStream.md          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/dev-tools/react-performance-tracks.md b/src/content/reference/dev-tools/react-performance-tracks.md
index 7a876061e..1c10823d3 100644
--- a/src/content/reference/dev-tools/react-performance-tracks.md
+++ b/src/content/reference/dev-tools/react-performance-tracks.md
@@ -140,7 +140,7 @@ In development builds, when you click on a component render entry, you can inspe
 
 The Server Requests track visualized all Promises that eventually end up in a React Server Component. This includes any `async` operations like calling `fetch` or async Node.js file operations.
 
-React will try to combine Promises that are started from inside third-party code into a single span representing the the duration of the entire operation blocking 1st party code.
+React will try to combine Promises that are started from inside third-party code into a single span representing the duration of the entire operation blocking 1st party code.
 For example, a third party library method called `getUser` that calls `fetch` internally multiple times will be represented as a single span called `getUser`, instead of showing multiple `fetch` spans.
 
 Clicking on spans will show you a stack trace of where the Promise was created as well as a view of the value that the Promise resolved to, if available.
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 297080702..dbf37fb7f 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -379,7 +379,7 @@ The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with
 1. The <CodeStep step={2}>error</CodeStep> that was thrown.
 2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
 
-Together with `onUncaughtError` and `onRecoverableError`, you can can implement your own error reporting system:
+Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
 
 <Sandpack>
 
diff --git a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
index 6645a1f8f..267349ffd 100644
--- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md
@@ -4,7 +4,7 @@ title: resumeAndPrerenderToNodeStream
 
 <Intro>
 
-`resumeAndPrerenderToNodeStream` continues a prerendered React tree to a static HTML string using a a [Node.js Stream.](https://nodejs.org/api/stream.html).
+`resumeAndPrerenderToNodeStream` continues a prerendered React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html).
 
 ```js
 const {prelude, postponed} = await resumeAndPrerenderToNodeStream(reactNode, postponedState, options?)

From 7159560dd2b66fa2e301a75e6af0088b60dc72bd Mon Sep 17 00:00:00 2001
From: Henry Su <henrysu4707@gmail.com>
Date: Sat, 7 Nov 2026 14:36:00 -0600
Subject: [PATCH 27/44] Fix onHeaders argument type in prerenderToNodeStream
 docs (#8720)

---
 src/content/reference/react-dom/static/prerenderToNodeStream.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index 52a96fef2..b7f218a70 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -60,7 +60,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
   * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
   * **optional** `onBrowserBailout`: A callback React calls when it recovers from [`browser()`](/reference/react-dom/browser) by leaving a Suspense fallback for the browser to replace. It receives an `Error` describing the browser-only render and an `errorInfo` object containing the `componentStack`. If a reason was passed to `browser`, it is available as `error.cause`. By default, React does nothing. [See how to report browser-only rendering.](/reference/react-dom/browser#reporting-browser-only-rendering-on-the-server)
   * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted.
-  * **optional** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives a [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) instance containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`.
+  * **optional** `onHeaders`: A callback that fires when React has determined the resource hints for the document, such as preconnects and stylesheet, font, or high-priority image preloads. It receives an object with a `Link` property containing the corresponding [`Link` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/link) value, so you can send it as an HTTP response header or as a [103 Early Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103) response. React calls it even when there are no resource hints to send. The header content is capped by `maxHeadersLength`.
   * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
   * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
 

From 024c049e6cb6fff1b1b5f8caeee4ce450cf96868 Mon Sep 17 00:00:00 2001
From: n34k <109991419+n34k@users.noreply.github.com>
Date: Sat, 7 Nov 2026 12:36:22 -0800
Subject: [PATCH 28/44] Fix typo, memorized -> memoized in learn typescript
 useMemo docs (#8312)

---
 src/content/learn/typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 2e6f7edc5..739efe366 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -335,7 +335,7 @@ function MyComponent() {
 
 </Note>
 
-The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
+The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memoized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
 
 ```ts
 // The type of visibleTodos is inferred from the return value of filterTodos

From 313083d8117aaa0f867c43c73aecab618b8a2320 Mon Sep 17 00:00:00 2001
From: Jahanzaib iqbal <78400134+jahanzaib-iqbal-dev@users.noreply.github.com>
Date: Sun, 8 Nov 2026 01:36:43 +0500
Subject: [PATCH 29/44] fix: remove unused useState import in
 lifecycle-of-reactive-effects (#8483)

The ChatRoom.js sandpack in the "Fix a connection switch" challenge
imports useState but only uses useEffect. Remove the unused import
to avoid confusing learners.

Fixes #8231
---
 src/content/learn/lifecycle-of-reactive-effects.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 608db09a0..56e179af8 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -1375,7 +1375,7 @@ export default function App() {
 ```
 
 ```js {expectedErrors: {'react-compiler': [8]}} src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 export default function ChatRoom({ roomId, createConnection }) {
   useEffect(() => {

From 79e67633d65fb547089df7b4e7ec8d91b14b4194 Mon Sep 17 00:00:00 2001
From: Ashley Claymore <aclaymore@bloomberg.net>
Date: Sat, 7 Nov 2026 20:37:15 +0000
Subject: [PATCH 30/44] Fix typo in
 react-labs-view-transitions-activity-and-more.md (#8357)

---
 .../2025/04/23/react-labs-view-transitions-activity-and-more.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
index 95821fc43..8bc53d6c8 100644
--- a/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
+++ b/src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md
@@ -14266,7 +14266,7 @@ Unfortunately, some hooks are still hard to think in terms of function instead o
 
 We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles.
 
-We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+We believe one of the reasons for confusion is that developers tend to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
 
 Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
 

From d4b8243582c3710978f8c45ee7ec676246a69306 Mon Sep 17 00:00:00 2001
From: Mihkel Eidast <mihkel@eida.st>
Date: Sat, 7 Nov 2026 22:38:09 +0200
Subject: [PATCH 31/44] docs: change MutableRef to MutableRefObject in React 19
 upgrade guide (#8214)

---
 src/content/blog/2024/04/25/react-19-upgrade-guide.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
index 6f918a2a9..99d8a1874 100644
--- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md
+++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md
@@ -639,7 +639,7 @@ const ref = useRef<number>(null);
 ref.current = 1;
 ```
 
-`MutableRef` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
+`MutableRefObject` is now deprecated in favor of a single `RefObject` type which `useRef` will always return:
 
 ```ts
 interface RefObject<T> {

From de83f1d13e610fb6880ac837523b22af29335dc8 Mon Sep 17 00:00:00 2001
From: Ulrich Stark <8657779+ulrichstark@users.noreply.github.com>
Date: Sat, 7 Nov 2026 21:38:43 +0100
Subject: [PATCH 32/44] Fix incorrect name of @vitejs/plugin-rsc package
 (#8202)

---
 ...rvice-and-source-code-exposure-in-react-server-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
index 206d49e39..1dd4e2b65 100644
--- a/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
+++ b/src/content/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components.md
@@ -76,7 +76,7 @@ Additional disclosures can be frustrating, but they are generally a sign of a he
 
 ### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/}
 
-Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vite/rsc-plugin](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk).
+Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk).
 
 Please see [the instructions in the previous post](/blog/2025/12/03/critical-security-vulnerability-in-react-server-components#update-instructions) for upgrade steps.
 

From b886228b274816eb4aad4503452ef2d91aa87f34 Mon Sep 17 00:00:00 2001
From: Emerson Pisoni <emersonpisoni14@gmail.com>
Date: Sat, 7 Nov 2026 17:39:20 -0300
Subject: [PATCH 33/44] Remove unused useState import in StrictMode.md (#8190)

Removed unused import of useState from React.
---
 src/content/reference/react/StrictMode.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index d1edaa225..f60abc534 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -536,7 +536,7 @@ root.render(<App />);
 ```
 
 ```js
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { createConnection } from './chat.js';
 
 const serverUrl = 'https://localhost:1234';

From 4acb201c50de7f1280f07681011cc2bc512f398d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Carlos=20D=C3=ADaz?= <jcarlos@convertiam.com>
Date: Sat, 7 Nov 2026 21:39:43 +0100
Subject: [PATCH 34/44] docs: fix incorrect article usage (a/an) (#8393)

- 'an custom' -> 'a custom' in components/index.md (consonant sound)
- 'a object' -> 'an object' in taintUniqueValue.md (vowel sound)
---
 src/content/reference/react-dom/components/index.md          | 2 +-
 src/content/reference/react/experimental_taintUniqueValue.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 23c9df6aa..055d73753 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -188,7 +188,7 @@ Non-string JavaScript values passed to custom elements will be serialized by def
 <my-element value={[1,2,3]}></my-element>
 ```
 
-React will, however, recognize an custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction:
+React will, however, recognize a custom element's property as one that it may pass arbitrary values to if the property name shows up on the class during construction:
 
 <Sandpack>
 
diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index 5e0d3f7ce..3bbd9d8ec 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -91,7 +91,7 @@ experimental_taintUniqueValue(
 );
 ```
 
-If the tainted value's lifespan is tied to a object, the `lifetime` should be the object that encapsulates the value. This ensures the tainted value remains protected for the lifetime of the encapsulating object.
+If the tainted value's lifespan is tied to an object, the `lifetime` should be the object that encapsulates the value. This ensures the tainted value remains protected for the lifetime of the encapsulating object.
 
 ```js
 import {experimental_taintUniqueValue} from 'react';

From e0ec287ec7c47ea3c1ae5089b47ed4760a27de9b Mon Sep 17 00:00:00 2001
From: Benjamin Kincses <beniakiraly105@gmail.com>
Date: Sat, 7 Nov 2026 21:46:29 +0100
Subject: [PATCH 35/44] Explain that the useState setter triggers a re-render
 in Quick Start (#8667)

* Explain that the useState setter triggers a re-render in Quick Start

* Explain re-render behavior before naming it

---------

Co-authored-by: Dextheking1 <Dextheking1@users.noreply.github.com>
Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
---
 src/content/learn/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index ab1d12afb..224f9dd72 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -336,7 +336,7 @@ function MyButton() {
 }
 ```
 
-React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on.
+Calling `setCount` tells React to call your component function again. This is called a *re-render*. This time, `count` will be `1`. Then it will be `2`. And so on.
 
 If you render the same component multiple times, each will get its own state. Click each button separately:
 

From fb39485dbf8bad7495db88caed656dadd86e03e3 Mon Sep 17 00:00:00 2001
From: Aaqib Javaid <78491606+aaqib605@users.noreply.github.com>
Date: Sun, 8 Nov 2026 02:19:44 +0530
Subject: [PATCH 36/44] fix: typo in useReducer documentation (#7314)

---
 src/content/learn/extracting-state-logic-into-a-reducer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md
index 5c08c0123..f38ec76d9 100644
--- a/src/content/learn/extracting-state-logic-into-a-reducer.md
+++ b/src/content/learn/extracting-state-logic-into-a-reducer.md
@@ -874,7 +874,7 @@ Reducers are not without downsides! Here's a few ways you can compare them:
 - **Testing:** A reducer is a pure function that doesn't depend on your component. This means that you can export and test it separately in isolation. While generally it's best to test components in a more realistic environment, for complex state update logic it can be useful to assert that your reducer returns a particular state for a particular initial state and action.
 - **Personal preference:** Some people like reducers, others don't. That's okay. It's a matter of preference. You can always convert between `useState` and `useReducer` back and forth: they are equivalent!
 
-We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even `useState` and `useReducer` in the same component.
+We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code. You don't have to use reducers for everything: feel free to mix and match! You can even use `useState` and `useReducer` in the same component.
 
 ## Writing reducers well {/*writing-reducers-well*/}
 

From 6fba260c020e4d99e4cf81b64911faf99cb84f1e Mon Sep 17 00:00:00 2001
From: fbellinder <fred.bellinder@eqtpartners.com>
Date: Sat, 7 Nov 2026 21:53:03 +0100
Subject: [PATCH 37/44] Fix act() event example using button before declaration
 (#8593)

* Fix act() dispatch example using button before it is defined

The event example called button.dispatchEvent before const button was declared, which would throw at runtime. Also drop it.only from the docs snippet.

* Highlight the full act event-dispatch block

---------

Co-authored-by: Aurora Scharff <aurora.sofie@gmail.com>
---
 src/content/reference/react/act.md | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md
index 007e2cb0f..fc9565909 100644
--- a/src/content/reference/react/act.md
+++ b/src/content/reference/react/act.md
@@ -117,26 +117,27 @@ Using `act` ensures that all updates have been applied before we make assertions
 
 To test events, wrap the event dispatch inside `act()`:
 
-```js {14,16}
+```js {17-19}
 import {act} from 'react';
 import ReactDOMClient from 'react-dom/client';
 import Counter from './Counter';
 
-it.only('can render and update a counter', async () => {
+it('can render and update a counter', async () => {
   const container = document.createElement('div');
   document.body.appendChild(container);
 
-  await act( async () => {
+  await act(async () => {
     ReactDOMClient.createRoot(container).render(<Counter />);
   });
 
+  const button = container.querySelector('button');
+  const label = container.querySelector('p');
+
   // ✅ Dispatch the event inside act().
   await act(async () => {
     button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
   });
 
-  const button = container.querySelector('button');
-  const label = container.querySelector('p');
   expect(label.textContent).toBe('You clicked 1 times');
   expect(document.title).toBe('You clicked 1 times');
 });

From 652b25c36f71105e75a5d4a02dfb701ec36292c7 Mon Sep 17 00:00:00 2001
From: 0verflowed-stack <143296066+0verflowed-stack@users.noreply.github.com>
Date: Sun, 8 Nov 2026 00:45:24 +0200
Subject: [PATCH 38/44] docs: fix typo in useActionState and remove redundant
 async in useTransition (#8642)

* Remove redundant async in useTransition documentation

* Fix typo in useActionState hook documentation
---
 src/content/reference/react/useActionState.md | 2 +-
 src/content/reference/react/useTransition.md  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 8e43e9043..47f05d9c7 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -257,7 +257,7 @@ button {
 
 </Sandpack>
 
-Every time you click "Add Ticket," React queues a call to `addToCartAction`. React shows the pending state until all the tickets are added, and then re-renders with the final state.
+Every time you click "Add Ticket", React queues a call to `addToCartAction`. React shows the pending state until all the tickets are added, and then re-renders with the final state.
 
 <DeepDive>
 
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 3a0ec1534..955a82168 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -661,7 +661,7 @@ export default function TabButton({ action, children, isActive }) {
     return <b className="pending">{children}</b>;
   }
   return (
-    <button onClick={async () => {
+    <button onClick={() => {
       startTransition(async () => {
         // await the action that's passed in.
         // This allows it to be either sync or async.

From 50bdc1ed710fc753b090dc5d92e7865ee1230fc0 Mon Sep 17 00:00:00 2001
From: Sumit G <sumitg3767@gmail.com>
Date: Sun, 8 Nov 2026 15:39:47 +0530
Subject: [PATCH 39/44] Clarify ref callback cleanup behavior in common ref
 docs (#8579)

* Clarify ref callback cleanup vs null behavior

* docs: incorporate review feedback on ref callback cleanup
---
 src/content/reference/react-dom/components/common.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index f81788da0..a70035947 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -257,9 +257,9 @@ Instead of a ref object (like the one returned by [`useRef`](/reference/react/us
 
 [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 the cleanup function returned from the 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 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.
+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 cleanup function returned by the *previous* function will be called, and the *next* function will be called with the DOM node. If no cleanup function is returned, the *previous* function will be called with `null` as the argument instead.
 
 #### Parameters {/*ref-callback-parameters*/}
 

From 1fb9f915ce811189dc825a8fc6334c77a02c6349 Mon Sep 17 00:00:00 2001
From: Supun Withana <supunisback@gmail.com>
Date: Sun, 8 Nov 2026 17:23:58 +0530
Subject: [PATCH 40/44] Pass options to createConnection in useEffect (#8533)

---
 src/content/reference/react/useEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index b56380968..ad84d7050 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1598,7 +1598,7 @@ function ChatRoom({ roomId }) {
 
   useEffect(() => {
     const options = createOptions(); // It's used inside the Effect
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, [createOptions]); // 🚩 As a result, these dependencies are always different on a commit

From 4089cc0b9449c897f584a3cf07360d4c9862157c Mon Sep 17 00:00:00 2001
From: imxv <sunmozong@gmail.com>
Date: Sun, 8 Nov 2026 19:56:17 +0800
Subject: [PATCH 41/44] docs: add missing "of" in render tree diagram alt text
 (#8420)

Co-authored-by: sunmozong <sunmozong@kuaishou.com>
---
 src/content/learn/describing-the-ui.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md
index 43db5edd5..b44f87e64 100644
--- a/src/content/learn/describing-the-ui.md
+++ b/src/content/learn/describing-the-ui.md
@@ -530,7 +530,7 @@ React uses trees to model the relationships between components and modules.
 
 A React render tree is a representation of the parent and child relationship between components.
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
+<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top of the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">
 
 An example React render tree.
 

From d013b51d20d602e785f17e87d808e7006ec93db4 Mon Sep 17 00:00:00 2001
From: andi hakim arif <andi.hakim.arif@gmail.com>
Date: Sun, 8 Nov 2026 18:56:55 +0700
Subject: [PATCH 42/44] typo on prerender.md (#7467)

Co-authored-by: Ricky <rickhanlonii@gmail.com>
---
 src/content/reference/react-dom/static/prerender.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md
index 1a4258f8f..315e32aca 100644
--- a/src/content/reference/react-dom/static/prerender.md
+++ b/src/content/reference/react-dom/static/prerender.md
@@ -66,7 +66,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to
 #### Returns {/*returns*/}
 
 `prerender` returns a Promise:
-- If rendering the is successful, the Promise will resolve to an object containing:
+- If the rendering is successful, the Promise will resolve to an object containing:
   - `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
   - `postponed`: a JSON-serializeable, opaque object that can be passed to [`resume`](/reference/react-dom/server/resume) if `prerender` did not finish. Otherwise `null` indicating that the `prelude` contains all the content and no resume is necessary.
 - If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)

From 331f7e38f14b751e6de1cc1ba57f0c548cd3fd8d Mon Sep 17 00:00:00 2001
From: Rayan Salhab <r.salhab@aiyexpertsolutions.com>
Date: Sun, 8 Nov 2026 13:57:12 +0200
Subject: [PATCH 43/44] docs: fix terminology - 'argument' to 'parameter' in
 tutorial (#8376)

Fixes reactjs/react.dev#8375

The tutorial incorrectly used 'argument' when referring to the function
parameter  in the handleClick function declaration. In JavaScript:
- Parameter is the variable in the function declaration
- Argument is the actual value passed when calling the function

This change improves accuracy and helps learners understand the
distinction between these two important programming concepts.
---
 src/content/learn/tutorial-tic-tac-toe.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 7be70f088..31e17b3d5 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -1138,7 +1138,7 @@ JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/Java
 
 </Note>
 
-Now you can add X's to the board...  but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add an argument `i` to the `handleClick` function that takes the index of the square to update:
+Now you can add X's to the board...  but only to the upper left square. Your `handleClick` function is hardcoded to update the index for the upper left square (`0`). Let's update `handleClick` to be able to update any square. Add a parameter `i` to the `handleClick` function that takes the index of the square to update:
 
 ```js {4,6}
 export default function Board() {

From f5fa1e82edacdf8c6bfc4dfd9cf52029a96d5fd3 Mon Sep 17 00:00:00 2001
From: Jaem <vanillajaem@gmail.com>
Date: Sun, 8 Nov 2026 20:58:52 +0900
Subject: [PATCH 44/44] docs: update lifecycle-of-reactive-effects.md (#8232)

* Update lifecycle-of-reactive-effects.md

* Remove useEffect from solution as well

---------

Co-authored-by: Jaem <91131509+DarkChocoJaem@users.noreply.github.com>
---
 src/content/learn/lifecycle-of-reactive-effects.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md
index 56e179af8..ec3719736 100644
--- a/src/content/learn/lifecycle-of-reactive-effects.md
+++ b/src/content/learn/lifecycle-of-reactive-effects.md
@@ -1473,7 +1473,7 @@ export default function App() {
 ```
 
 ```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 export default function ChatRoom({ roomId, createConnection }) {
   useEffect(() => {
@@ -1561,7 +1561,7 @@ export default function App() {
 ```
 
 ```js src/ChatRoom.js active
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import {
   createEncryptedConnection,
   createUnencryptedConnection,