Fix type issues with useActionState docs

Author: eps1lon

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`. 

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 (
     <form action={submitAction}>
@@ -190,15 +190,15 @@ 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";
 
 import {updateName} from './actions';
 
 function UpdateName() {
-  const [submitAction] = useActionState(updateName, `/name/update`);
+  const [, submitAction] = useActionState(updateName, null, `/name/update`);
 
   return (
     <form action={submitAction}>

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

@@ -157,15 +157,15 @@ 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 (
     <>
       <form action={action}>
         <input type="text" name="username" />
         <button type="submit">Request</button>
       </form>
-      <p>Last submission request returned: {returnValue}</p>
+      <p>Last submission request returned: {state}</p>
     </>
   );
 }