Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions src/content/docs/en/guides/integrations-guide/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
);

Expand All @@ -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;
Expand Down