Skip to content

Commit a2ca512

Browse files
committed
Fix useActionState.md
1 parent 6fc98ff commit a2ca512

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/content/reference/react/useActionState.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,12 +84,12 @@ If used with a Server Function, `useActionState` allows the server's response fr
8484
8585
Call `useActionState` at the top level of your component to access the return value of an action from the last time a form was submitted.
8686
87-
```js [[1, 5, "state"], [2, 5, "formAction"], [3, 5, "action"], [4, 5, "null"], [2, 8, "formAction"]]
87+
```js [[1, 5, "state"], [2, 5, "formAction"], [3,5, "isPending"], [4, 5, "action"], [5, 5, "null"], [2, 8, "formAction"]]
8888
import { useActionState } from 'react';
8989
import { action } from './actions.js';
9090

9191
function MyComponent() {
92-
const [state, formAction] = useActionState(action, null);
92+
const [state, formAction, isPending] = useActionState(action, null);
9393
// ...
9494
return (
9595
<form action={formAction}>
@@ -101,13 +101,13 @@ function MyComponent() {
101101
102102
`useActionState` returns an array with the following items:
103103
104-
1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={4}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={3}>action</CodeStep> you provided.
104+
1. The <CodeStep step={1}>current state</CodeStep> of the form, which is initially set to the <CodeStep step={5}>initial state</CodeStep> you provided, and after the form is submitted is set to the return value of the <CodeStep step={4}>action</CodeStep> you provided.
105105
2. A <CodeStep step={2}>new action</CodeStep> that you pass to `<form>` as its `action` prop or call manually within `startTransition`.
106-
3. A <CodeStep step={1}>pending state</CodeStep> that you can utilise while your action is processing.
106+
3. A <CodeStep step={3}>pending state</CodeStep> that you can utilise while your action is processing.
107107
108-
When the form is submitted, the <CodeStep step={3}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
108+
When the form is submitted, the <CodeStep step={4}>action</CodeStep> function that you provided will be called. Its return value will become the new <CodeStep step={1}>current state</CodeStep> of the form.
109109
110-
The <CodeStep step={3}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={4}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useActionState` had not been used.
110+
The <CodeStep step={4}>action</CodeStep> that you provide will also receive a new first argument, namely the <CodeStep step={1}>current state</CodeStep> of the form. The first time the form is submitted, this will be the <CodeStep step={5}>initial state</CodeStep> you provided, while with subsequent submissions, it will be the return value from the last time the action was called. The rest of the arguments are the same as if `useActionState` had not been used.
111111
112112
```js [[3, 1, "action"], [1, 1, "currentState"]]
113113
function action(currentState, formData) {

0 commit comments

Comments
 (0)