You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/form.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -202,7 +202,7 @@ Because you call the action manually from `onSubmit`, [`useFormStatus`](/referen
202
202
203
203
<DeepDive>
204
204
205
-
#### Resetting only some fields, or resetting on the server {/*resetting-only-some-fields*/}
205
+
#### Reset only some fields, or reset on the server {/*resetting-only-some-fields*/}
206
206
207
207
The `onSubmit` approach keeps every uncontrolled field. When you need finer control, two other patterns are available:
208
208
@@ -276,7 +276,7 @@ export async function submitForm(query) {
276
276
277
277
To learn more about the `useFormStatus` Hook see the [reference documentation](/reference/react-dom/hooks/useFormStatus).
278
278
279
-
### Optimistically updating form data {/*optimistically-updating-form-data*/}
279
+
### Optimistically update form data {/*optimistically-updating-form-data*/}
280
280
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.
281
281
282
282
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.
@@ -346,7 +346,7 @@ export async function deliverMessage(message) {
346
346
[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentation page is published'
347
347
[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).'
348
348
349
-
### Handling form submission errors {/*handling-form-submission-errors*/}
349
+
### Handle form submission errors {/*handling-form-submission-errors*/}
350
350
351
351
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.
352
352
@@ -446,7 +446,7 @@ export async function signUpNewUser(newEmail) {
446
446
447
447
Learn more about updating state from a form action with the [`useActionState`](/reference/react/useActionState) docs
A form can have more than one submit button, each running a different action. Set the `formAction` prop on a `<button>` to override the `<form>`'s `action` when that button submits the form.
0 commit comments