Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/content/reference/react-dom/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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*/}

Expand Down
89 changes: 89 additions & 0 deletions src/content/reference/react-dom/requestFormReset.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
---
title: requestFormReset
---

<Intro>

`requestFormReset` lets you reset a React-managed form after an Action or Transition finishes.

```js
requestFormReset(form)
```

</Intro>

<InlineToc />

---

## 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 `<form action={...}>` 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 (
<form onSubmit={onSubmit}>
<input name="query" defaultValue="react" />
<button type="submit">Search</button>
</form>
);
}
```

If your submission uses the built-in `<form action={...}>` behavior, you don't need to call `requestFormReset` manually.
4 changes: 4 additions & 0 deletions src/sidebarReference.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading