Skip to content

Commit a975b2e

Browse files
committed
Polish form documentation wording
1 parent 544dff7 commit a975b2e

2 files changed

Lines changed: 8 additions & 10 deletions

File tree

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function Search() {
8686

8787
<Note>
8888

89-
`onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event). Starting in React 19, the [`action` prop](#handle-form-submission-with-an-action-prop) is the preferred API for form submissions, because React handles the submission in a [Transition](/reference/react/useTransition), with pending state, optimistic updates, handles concurrency across multiple submissions, Error Boundaries, and [Server Functions](/reference/rsc/server-functions).
89+
`onSubmit` works in every version of React and gives you direct access to the [submit event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event). Starting in React 19, the [`action` prop](#handle-form-submission-with-an-action-prop) is the preferred API for form submissions. With `action`, React manages pending state and concurrency across multiple submissions. You can also use optimistic updates, Error Boundaries, and [Server Functions](/reference/rsc/server-functions).
9090

9191
</Note>
9292

@@ -98,7 +98,7 @@ Pass a function to the `action` prop to run it when the form is submitted. React
9898

9999
When you pass a function to `action`, React:
100100

101-
* Runs the function in a [Transition](/reference/react/useTransition), keeping the page responsive.
101+
* Runs the function in a [Transition](/reference/react/useTransition).
102102
* Makes the pending state available to child components via [`useFormStatus`](/reference/react-dom/hooks/useFormStatus).
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).
@@ -128,7 +128,7 @@ export default function Search() {
128128

129129
### Handling form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
130130

131-
A `<form>`'s `action` prop can run a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) when the user submits the form. Users can submit that form before JavaScript loads, and when JavaScript is disabled. This matches how forms behave when you pass a URL to `action`.
131+
A `<form>`'s `action` prop can run a Server Function (a function marked with [`'use server'`](/reference/rsc/use-server)) when the user submits the form. Users can submit that form before JavaScript loads or when JavaScript is disabled. This matches how forms behave when you pass a URL to `action`.
132132

133133
React calls the Server Function with the form's [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and includes every input with a `name` attribute. To pass additional data, such as an ID from props, see [Passing extra data to an Action](#passing-extra-data-to-an-action).
134134

@@ -219,7 +219,7 @@ function AddToCart({ productId }) {
219219

220220
#### A function in the component {/*passing-extra-data-function*/}
221221

222-
Define the function you pass to `action` in the Client Component that has the props or state. That function reads those values and passes them to a Server Function.
222+
Define the function passed to `action` in the Client Component so it can read the component's props or state. That function passes those values to a Server Function.
223223

224224
```jsx
225225
// AddToCart.js
@@ -360,7 +360,7 @@ export default function App() {
360360

361361
```js src/actions.js
362362
export async function deliverMessage(message) {
363-
// mocking a delay to simulate message delivery
363+
// Simulate a message delivery delay
364364
await new Promise((res) => setTimeout(res, 1000));
365365
return message;
366366
}
@@ -537,7 +537,7 @@ export default function EditForm() {
537537

538538
</Sandpack>
539539

540-
Call a Server Function from `saveAction`, then store the string it returns. Because `saveAction` is defined in the Client Component, users can submit this form only after JavaScript loads:
540+
Call a Server Function from `saveAction`, then store its return value in state. Because `saveAction` is defined in the Client Component, users can submit this form only after JavaScript loads:
541541

542542
```js
543543
// actions.js
@@ -604,17 +604,15 @@ A form can have more than one submit button, each running a different Action. A
604604
import { useActionState } from 'react';
605605

606606
export default function ArticleForm() {
607-
// Hold the saved draft in state so the textarea keeps its content after saving
607+
// Preserve the saved draft after submission
608608
const [formState, dispatchFormState] = useActionState((state, payload) => {
609609
const content = payload.data.get('content');
610610
switch (payload.type) {
611611
case 'save':
612612
alert(`Your draft of '${content}' was saved!`);
613-
// Keep the submitted content as the current draft
614613
return payload.data;
615614
case 'publish':
616615
alert(`'${content}' was published!`);
617-
// Reset the form
618616
return new FormData();
619617
default:
620618
return state;

‎src/content/reference/react/useActionState.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1245,7 +1245,7 @@ When validation fails, `updateName` returns an error and the submitted `FormData
12451245
12461246
<RSC>
12471247
1248-
When the `reducerAction` passed to `useActionState` is a [Server Function](/reference/rsc/server-functions), pass the returned `submitAction` to the form's `action` prop. React can then display the Server Function's returned value before hydration completes. Return the submitted `FormData` and use it to set each field's `defaultValue` to preserve those values before JavaScript loads. On pages with dynamic content, you can also use the optional `permalink` parameter for progressive enhancement. This is typically handled by your framework for you.
1248+
When the `reducerAction` passed to `useActionState` is a [Server Function](/reference/rsc/server-functions), pass the returned `submitAction` to the form's `action` prop. React can then display the Server Function's returned value before hydration completes. Return the submitted `FormData` and use it to set each field's `defaultValue` to preserve those values before JavaScript loads. On pages with dynamic content, you can also use the optional `permalink` parameter for progressive enhancement.
12491249
12501250
</RSC>
12511251

0 commit comments

Comments
 (0)