From 82cfebb3166ca3b3c56f892a71e16a01b3cdd69f Mon Sep 17 00:00:00 2001
From: Rylan Sedlacek <99748019+rylansedlacek@users.noreply.github.com>
Date: Sun, 31 May 2026 20:05:38 -0500
Subject: [PATCH] docs: explain how to preserve form state after submission
---
.../reference/react-dom/components/form.md | 45 +++++++++++++++++++
1 file changed, 45 insertions(+)
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 1043b13a0de..2af1924a6dd 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -71,6 +71,51 @@ export default function Search() {
+### Keep form values after submission {/*keep-form-values-after-submission*/}
+
+When a function is passed to the `action` prop, React resets all uncontrolled field elements in the form after the action succeeds.
+
+If you want to preserve the current form values after submission, use `onSubmit` instead of `action`. You can prevent the default form submission behavior and call your action manually inside a Transition.
+
+
+
+```js src/App.js
+import { useTransition } from "react";
+
+export default function Search() {
+ const [isPending, startTransition] = useTransition();
+
+ async function search(formData) {
+ const query = formData.get("query");
+ alert(`You searched for '${query}'`);
+ }
+
+ function handleSubmit(event) {
+ event.preventDefault();
+
+ const formData = new FormData(event.target);
+
+ startTransition(() => {
+ search(formData);
+ });
+ }
+
+ return (
+
+ );
+}
+```
+
+
+
+Using `onSubmit` preserves the browser's default behavior of leaving form values unchanged after submission while still allowing the submission logic to run in a Transition.
+
+
### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
Render a `