Skip to content

Commit caf19b4

Browse files
committed
Fix type issues with useActionState docs
1 parent e45ac55 commit caf19b4

File tree

3 files changed

+22
-16
lines changed

3 files changed

+22
-16
lines changed

src/content/blog/2024/04/25/react-19.md

+17-11
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,9 @@ function ChangeName({ name, setName }) {
129129
return error;
130130
}
131131
redirect("/path");
132-
}
132+
return null;
133+
},
134+
null,
133135
);
134136

135137
return (
@@ -149,16 +151,20 @@ In the next section, we'll break down each of the new Action features in React 1
149151
To make the common cases easier for Actions, we've added a new hook called `useActionState`:
150152

151153
```js
152-
const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {
153-
const {error} = await updateName(newName);
154-
if (!error) {
155-
// You can return any result of the action.
156-
// Here, we return only the error.
157-
return error;
158-
}
159-
160-
// handle success
161-
});
154+
const [error, submitAction, isPending] = useActionState(
155+
async (previousState, newName) => {
156+
const { error } = await updateName(newName);
157+
if (!error) {
158+
// You can return any result of the action.
159+
// Here, we return only the error.
160+
return error;
161+
}
162+
163+
// handle success
164+
return null;
165+
},
166+
null,
167+
);
162168
```
163169

164170
`useActionState` accepts a function (the "Action"), and returns a wrapped Action to call. This works because Actions compose. When the wrapped Action is called, `useActionState` will return the last result of the Action as `data`, and the pending state of the Action as `pending`.

src/content/reference/rsc/server-actions.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ You can compose Server Actions with `useActionState` for the common case where y
173173
import {updateName} from './actions';
174174

175175
function UpdateName() {
176-
const [submitAction, state, isPending] = useActionState(updateName);
176+
const [submitAction, state, isPending] = useActionState(updateName, {error: null});
177177

178178
return (
179179
<form action={submitAction}>
@@ -190,15 +190,15 @@ For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useForm
190190

191191
### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
192192

193-
Server Actions also support progressive enhancement with the second argument of `useActionState`.
193+
Server Actions also support progressive enhancement with the third argument of `useActionState`.
194194

195195
```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
196196
"use client";
197197

198198
import {updateName} from './actions';
199199

200200
function UpdateName() {
201-
const [submitAction] = useActionState(updateName, `/name/update`);
201+
const [, submitAction] = useActionState(updateName, null, `/name/update`);
202202

203203
return (
204204
<form action={submitAction}>

src/content/reference/rsc/use-server.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -157,15 +157,15 @@ import { useActionState } from 'react';
157157
import requestUsername from './requestUsername';
158158

159159
function UsernameForm() {
160-
const [returnValue, action] = useActionState(requestUsername, 'n/a');
160+
const [state, action] = useActionState(requestUsername, null, 'n/a');
161161

162162
return (
163163
<>
164164
<form action={action}>
165165
<input type="text" name="username" />
166166
<button type="submit">Request</button>
167167
</form>
168-
<p>Last submission request returned: {returnValue}</p>
168+
<p>Last submission request returned: {state}</p>
169169
</>
170170
);
171171
}

0 commit comments

Comments
 (0)