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 (
@@ -190,7 +190,7 @@ For more, see the docs for [`useActionState`](/reference/react-dom/hooks/useForm ### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/} -Server Actions also support progressive enhancement with the second argument of `useActionState`. +Server Actions also support progressive enhancement with the third argument of `useActionState`. ```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]] "use client"; @@ -198,7 +198,7 @@ Server Actions also support progressive enhancement with the second argument of import {updateName} from './actions'; function UpdateName() { - const [submitAction] = useActionState(updateName, `/name/update`); + const [, submitAction] = useActionState(updateName, null, `/name/update`); return ( diff --git a/src/content/reference/rsc/use-server.md b/src/content/reference/rsc/use-server.md index 27ff876b56d..8f3a0095b2b 100644 --- a/src/content/reference/rsc/use-server.md +++ b/src/content/reference/rsc/use-server.md @@ -157,7 +157,7 @@ import { useActionState } from 'react'; import requestUsername from './requestUsername'; function UsernameForm() { - const [returnValue, action] = useActionState(requestUsername, 'n/a'); + const [state, action] = useActionState(requestUsername, null, 'n/a'); return ( <> @@ -165,7 +165,7 @@ function UsernameForm() {
-

Last submission request returned: {returnValue}

+

Last submission request returned: {state}

); }