diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/04/25/react-19.md index f8559d31908..0670eaa80db 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/04/25/react-19.md @@ -132,7 +132,9 @@ function ChangeName({ name, setName }) { return error; } redirect("/path"); - } + return null; + }, + null, ); return ( @@ -152,16 +154,20 @@ In the next section, we'll break down each of the new Action features in React 1 To make the common cases easier for Actions, we've added a new hook called `useActionState`: ```js -const [error, submitAction, isPending] = useActionState(async (previousState, newName) => { - const error = await updateName(newName); - if (error) { - // You can return any result of the action. - // Here, we return only the error. - return error; - } - - // handle success -}); +const [error, submitAction, isPending] = useActionState( + async (previousState, newName) => { + const error = await updateName(newName); + if (error) { + // You can return any result of the action. + // Here, we return only the error. + return error; + } + + // handle success + return null; + }, + null, +); ``` `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`. diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md index f958c4ce515..cdabf5ad1c2 100644 --- a/src/content/reference/rsc/server-actions.md +++ b/src/content/reference/rsc/server-actions.md @@ -173,7 +173,7 @@ You can compose Server Actions with `useActionState` for the common case where y import {updateName} from './actions'; function UpdateName() { - const [submitAction, state, isPending] = useActionState(updateName); + const [submitAction, state, isPending] = useActionState(updateName, {error: null}); return (
-Last submission request returned: {returnValue}
+Last submission request returned: {state}
> ); }