From a91362b3d2142d676b17df20b9a7715921556e97 Mon Sep 17 00:00:00 2001 From: Sumit Date: Wed, 5 Aug 2026 16:08:20 +0530 Subject: [PATCH 1/3] Add requestFormReset React DOM reference page --- src/content/reference/react-dom/index.md | 1 + .../reference/react-dom/requestFormReset.md | 89 +++++++++++++++++++ src/sidebarReference.json | 4 + 3 files changed, 94 insertions(+) create mode 100644 src/content/reference/react-dom/requestFormReset.md diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md index d01bd656204..030487c153d 100644 --- a/src/content/reference/react-dom/index.md +++ b/src/content/reference/react-dom/index.md @@ -16,6 +16,7 @@ These APIs can be imported from your components. They are rarely used: * [`createPortal`](/reference/react-dom/createPortal) lets you render child components in a different part of the DOM tree. * [`flushSync`](/reference/react-dom/flushSync) lets you force React to flush a state update and update the DOM synchronously. +* [`requestFormReset`](/reference/react-dom/requestFormReset) lets you request a form reset when handling submissions with custom Actions or Transitions. ## Resource Preloading APIs {/*resource-preloading-apis*/} diff --git a/src/content/reference/react-dom/requestFormReset.md b/src/content/reference/react-dom/requestFormReset.md new file mode 100644 index 00000000000..b57a366f43c --- /dev/null +++ b/src/content/reference/react-dom/requestFormReset.md @@ -0,0 +1,89 @@ +--- +title: requestFormReset +--- + + + +`requestFormReset` lets you reset a React-managed form after an Action or Transition finishes. + +```js +requestFormReset(form) +``` + + + + + +--- + +## Reference {/*reference*/} + +### `requestFormReset(form)` {/*requestformreset*/} + +Call `requestFormReset` to request that a form resets after the current Action or Transition completes. + +```js +import { startTransition } from 'react'; +import { requestFormReset } from 'react-dom'; + +function handleSubmit(form) { + startTransition(async () => { + const formData = new FormData(form); + requestFormReset(form); + await save(formData); + }); +} +``` + +[See more examples below.](#usage) + +#### Parameters {/*parameters*/} + +* `form`: an [HTML form element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) rendered by React. + +#### Returns {/*returns*/} + +`requestFormReset` returns nothing. + +#### Caveats {/*caveats*/} + +* Pass a form element that is rendered by React. Passing a non-form element, or a form not managed by React, throws an error. +* `requestFormReset` is intended for Actions and Transitions. If called outside an Action or Transition, React warns in development and performs a synchronous reset. +* `requestFormReset` is useful when you implement form submission logic yourself (for example with `onSubmit` + `startTransition`) and still want React's form reset behavior. +* This API requests a reset for uncontrolled form fields. For controlled fields, handle resets by updating state, such as in `onReset`. + +--- + +## Usage {/*usage*/} + +### Requesting a reset in a custom form Action {/*requesting-a-reset-in-a-custom-form-action*/} + +React automatically resets uncontrolled fields after a successful `
` submission. When you implement submission manually, you can opt into the same behavior by calling `requestFormReset`. + +```js +import { startTransition } from 'react'; +import { requestFormReset } from 'react-dom'; + +function SearchForm() { + async function onSubmit(event) { + event.preventDefault(); + + const form = event.currentTarget; + const formData = new FormData(form); + + startTransition(async () => { + requestFormReset(form); + await submitSearch(formData); + }); + } + + return ( + + + +
+ ); +} +``` + +If your submission uses the built-in `
` behavior, you don't need to call `requestFormReset` manually. diff --git a/src/sidebarReference.json b/src/sidebarReference.json index 622fa687429..75a4d03abec 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -256,6 +256,10 @@ "title": "flushSync", "path": "/reference/react-dom/flushSync" }, + { + "title": "requestFormReset", + "path": "/reference/react-dom/requestFormReset" + }, { "title": "preconnect", "path": "/reference/react-dom/preconnect" From f2ce7736402d3c23ddac4caa946a6d6be718f208 Mon Sep 17 00:00:00 2001 From: Sumit Date: Sun, 8 Nov 2026 10:54:30 +0530 Subject: [PATCH 2/3] docs: cross-link automatic and manual form resets --- src/content/reference/react-dom/components/form.md | 2 +- src/content/reference/react-dom/requestFormReset.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 10e9c67940e..8104712a310 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -88,7 +88,7 @@ Reading form data with `onSubmit` works in every version of React and gives you ### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/} -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. +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. If you handle submission manually, you can [request the same reset behavior with `requestFormReset`](/reference/react-dom/requestFormReset#requesting-a-reset-in-a-custom-form-action). diff --git a/src/content/reference/react-dom/requestFormReset.md b/src/content/reference/react-dom/requestFormReset.md index b57a366f43c..cd99a904a4c 100644 --- a/src/content/reference/react-dom/requestFormReset.md +++ b/src/content/reference/react-dom/requestFormReset.md @@ -58,7 +58,7 @@ function handleSubmit(form) { ### Requesting a reset in a custom form Action {/*requesting-a-reset-in-a-custom-form-action*/} -React automatically resets uncontrolled fields after a successful `` submission. When you implement submission manually, you can opt into the same behavior by calling `requestFormReset`. +React [automatically resets uncontrolled fields after a successful `` submission](/reference/react-dom/components/form#handle-form-submission-with-an-action-prop). When you implement submission manually, you can opt into the same behavior by calling `requestFormReset`. ```js import { startTransition } from 'react'; From bffaf361b7ed82774fa5d9509182b26d1f3367c0 Mon Sep 17 00:00:00 2001 From: Sumit Date: Sun, 8 Nov 2026 10:57:03 +0530 Subject: [PATCH 3/3] Restore unrelated upstream test formatting --- .../lint-markdown-code-blocks.test.js | 23 +++++++++++++++---- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js index 26fffcdade6..f0b0e991ec1 100644 --- a/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js +++ b/eslint-local-rules/__tests__/lint-markdown-code-blocks.test.js @@ -11,7 +11,12 @@ const path = require('path'); const {ESLint} = require('eslint'); const plugin = require('..'); -const FIXTURES_DIR = path.join(__dirname, 'fixtures', 'src', 'content'); +const FIXTURES_DIR = path.join( + __dirname, + 'fixtures', + 'src', + 'content' +); const PARSER_PATH = path.join(__dirname, '..', 'parser.js'); function createESLint({fix = false} = {}) { @@ -48,7 +53,11 @@ async function lintFixture(name, {fix = false} = {}) { async function run() { const basicResult = await lintFixture('basic-error.md'); - assert.strictEqual(basicResult.messages.length, 1, 'expected one diagnostic'); + assert.strictEqual( + basicResult.messages.length, + 1, + 'expected one diagnostic' + ); assert( basicResult.messages[0].message.includes('Calling setState during render'), 'expected message to mention setState during render' @@ -82,7 +91,9 @@ async function run() { fix: true, }); assert( - duplicateFixed.output.includes("{expectedErrors: {'react-compiler': [4]}}"), + duplicateFixed.output.includes( + "{expectedErrors: {'react-compiler': [4]}}" + ), 'expected duplicates to be rewritten to a single canonical block' ); assert( @@ -107,7 +118,9 @@ async function run() { fix: true, }); assert( - malformedFixed.output.includes("{expectedErrors: {'react-compiler': [4]}}"), + malformedFixed.output.includes( + "{expectedErrors: {'react-compiler': [4]}}" + ), 'expected malformed metadata to be replaced with canonical form' ); @@ -143,7 +156,7 @@ async function run() { ); } -run().catch((error) => { +run().catch(error => { console.error(error); process.exitCode = 1; });