Update experimental React Actions helpers to stable (#12402)

Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Armand Philippot <[email protected]>

Author: 3 people

src/content/docs/en/guides/integrations-guide/react.mdx

@@ -115,30 +115,30 @@ To use your first React component in Astro, head to our [UI framework documentat
 * 💧 client-side hydration options, and
 * 🤝 opportunities to mix and nest frameworks together
 
-## Integrate Actions with `useActionState()` (experimental)
+## Integrate Actions with `useActionState()`
 
-The `@astrojs/react` integration provides two experimental functions for use with [Astro Actions][astro-actions]: `experimental_withState()` and `experimental_getActionState()`.
+The `@astrojs/react` integration provides two functions for use with [Astro Actions][astro-actions]: `withState()` and `getActionState()`.
 
 These are used with [React's useActionState() hook](https://react.dev/reference/react/useActionState) to read and update client-side state when triggering actions during form submission.
 
-### `experimental_withState()`
+### `withState()`
 
 <p>
 
 **Type:** `(action: FormFn<T>) => (state: T, formData: FormData) => FormFn<T>`<br />
-<Since v="4.3.2" />
+<Since v="4.4.0" pkg="@astrojs/react" />
 </p>
 
-You can pass `experimental_withState()` and the action you want to trigger to React's `useActionState()` hook as the form action function. The example below passes a `like` action to increase a counter along with an initial state of `0` likes.
+You can pass `withState()` and the action you want to trigger to React's `useActionState()` hook as the form action function. The example below passes a `like` action to increase a counter along with an initial state of `0` likes.
 
 ```jsx title="Like.tsx" ins={2,7} "useActionState"
 import { actions } from 'astro:actions';
-import { experimental_withState } from '@astrojs/react/actions';
+import { withState } from '@astrojs/react/actions';
 import { useActionState } from "react";
 
 export function Like({ postId }: { postId: string }) {
   const [state, action, pending] = useActionState(
-    experimental_withState(actions.like),
+    withState(actions.like),
     { data: 0, error: undefined }, // initial likes and errors
   );
 
@@ -151,32 +151,32 @@ export function Like({ postId }: { postId: string }) {
 }
 ```
 
-The `experimental_withState()` function will match the action's types with React's expectations and preserve metadata used for progressive enhancement, allowing it to work even when JavaScript is disabled on the user's device.
+The `withState()` function will match the action's types with React's expectations and preserve metadata used for progressive enhancement, allowing it to work even when JavaScript is disabled on the user's device.
 
-### `experimental_getActionState()`
+### `getActionState()`
 
 <p>
 
 **Type:** `(context: ActionAPIContext) => Promise<T>`<br />
-<Since v="4.3.2" />
+<Since v="4.4.0" pkg="@astrojs/react" />
 </p>
 
-You can access the state stored by `useActionState()` on the server in your action `handler` with `experimental_getActionState()`. It accepts the [Astro API context](/en/reference/api-reference/#the-context-object), and optionally, you can apply a type to the result. 
+You can access the state stored by `useActionState()` on the server in your action `handler` with `getActionState()`. It accepts the [Astro API context](/en/reference/api-reference/#the-context-object), and optionally, you can apply a type to the result. 
 
 The example below gets the current value of likes from a counter, typed as a number, in order to create an incrementing `like` action:
 
 ```ts title="actions.ts" ins={3,11}
 import { defineAction, type SafeResult } from 'astro:actions';
 import { z } from 'astro:schema';
-import { experimental_getActionState } from '@astrojs/react/actions';
+import { getActionState } from '@astrojs/react/actions';
 
 export const server = {
   like: defineAction({
     input: z.object({
       postId: z.string(),
     }),
     handler: async ({ postId }, ctx) => {
-      const { data: currentLikes = 0, error } = await experimental_getActionState<SafeResult<any, number>>(ctx);
+      const { data: currentLikes = 0, error } = await getActionState<SafeResult<any, number>>(ctx);
 
       // handle errors
       if (error) throw error;