Skip to content

Commit d935c7f

Browse files
authored
Add missing docs for requestFormReset API (#8576)
* Add requestFormReset React DOM reference page * docs: cross-link automatic and manual form resets * Restore unrelated upstream test formatting
1 parent 7594a2b commit d935c7f

4 files changed

Lines changed: 96 additions & 0 deletions

File tree

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ When you pass a function to `action`, React:
103103
* Propagates any errors to the nearest Error Boundary.
104104
* 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).
105105

106+
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).
107+
106108
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).
107109

108110
<Sandpack>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ These APIs can be imported from your components. They are rarely used:
1616

1717
* [`createPortal`](/reference/react-dom/createPortal) lets you render child components in a different part of the DOM tree.
1818
* [`flushSync`](/reference/react-dom/flushSync) lets you force React to flush a state update and update the DOM synchronously.
19+
* [`requestFormReset`](/reference/react-dom/requestFormReset) lets you request a form reset when handling submissions with custom Actions or Transitions.
1920

2021
## Resource Preloading APIs {/*resource-preloading-apis*/}
2122

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: requestFormReset
3+
---
4+
5+
<Intro>
6+
7+
`requestFormReset` lets you reset a React-managed form after an Action or Transition finishes.
8+
9+
```js
10+
requestFormReset(form)
11+
```
12+
13+
</Intro>
14+
15+
<InlineToc />
16+
17+
---
18+
19+
## Reference {/*reference*/}
20+
21+
### `requestFormReset(form)` {/*requestformreset*/}
22+
23+
Call `requestFormReset` to request that a form resets after the current Action or Transition completes.
24+
25+
```js
26+
import { startTransition } from 'react';
27+
import { requestFormReset } from 'react-dom';
28+
29+
function handleSubmit(form) {
30+
startTransition(async () => {
31+
const formData = new FormData(form);
32+
requestFormReset(form);
33+
await save(formData);
34+
});
35+
}
36+
```
37+
38+
[See more examples below.](#usage)
39+
40+
#### Parameters {/*parameters*/}
41+
42+
* `form`: an [HTML form element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) rendered by React.
43+
44+
#### Returns {/*returns*/}
45+
46+
`requestFormReset` returns nothing.
47+
48+
#### Caveats {/*caveats*/}
49+
50+
* Pass a form element that is rendered by React. Passing a non-form element, or a form not managed by React, throws an error.
51+
* `requestFormReset` is intended for Actions and Transitions. If called outside an Action or Transition, React warns in development and performs a synchronous reset.
52+
* `requestFormReset` is useful when you implement form submission logic yourself (for example with `onSubmit` + `startTransition`) and still want React's form reset behavior.
53+
* This API requests a reset for uncontrolled form fields. For controlled fields, handle resets by updating state, such as in `onReset`.
54+
55+
---
56+
57+
## Usage {/*usage*/}
58+
59+
### Requesting a reset in a custom form Action {/*requesting-a-reset-in-a-custom-form-action*/}
60+
61+
React [automatically resets uncontrolled fields after a successful `<form action={...}>` 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`.
62+
63+
```js
64+
import { startTransition } from 'react';
65+
import { requestFormReset } from 'react-dom';
66+
67+
function SearchForm() {
68+
async function onSubmit(event) {
69+
event.preventDefault();
70+
71+
const form = event.currentTarget;
72+
const formData = new FormData(form);
73+
74+
startTransition(async () => {
75+
requestFormReset(form);
76+
await submitSearch(formData);
77+
});
78+
}
79+
80+
return (
81+
<form onSubmit={onSubmit}>
82+
<input name="query" defaultValue="react" />
83+
<button type="submit">Search</button>
84+
</form>
85+
);
86+
}
87+
```
88+
89+
If your submission uses the built-in `<form action={...}>` behavior, you don't need to call `requestFormReset` manually.

‎src/sidebarReference.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,10 @@
262262
"title": "flushSync",
263263
"path": "/reference/react-dom/flushSync"
264264
},
265+
{
266+
"title": "requestFormReset",
267+
"path": "/reference/react-dom/requestFormReset"
268+
},
265269
{
266270
"title": "preconnect",
267271
"path": "/reference/react-dom/preconnect"

0 commit comments

Comments
 (0)