--- name: using-action-state description: Teaches useActionState hook for managing form state with Server Actions in React 19. Use when implementing forms, handling form submissions, tracking pending states, or working with Server Functions. allowed-tools: Read, Write, Edit, Glob, Grep version: 1.0.0 --- # useActionState Patterns for Forms Teaches React 19's `useActionState` hook for form state management with Server Actions. <\/role> When: mentioning `useActionState`, form state\/handling, Server Actions\/Functions; tracking pending\/submission status; implementing progressive enhancement; server-side form validation. <\/when-to-activate> `useActionState` manages form state based on action results: tracks pending state (automatic `isPending`), manages form state (returns action results), integrates Server Actions (`'use server'`), enables progressive enhancement (optional no-JS permalink). Replaces manual form submission state management. <\/overview> ## Standard Form with useActionState **Server Action:** ```javascript 'use server'; export async function submitForm(previousState, formData) { const email = formData.get('email'); if (!email || !email.includes('@')) { return { error: 'Invalid email address' }; } await saveToDatabase({ email }); return { success: true }; } ``` ```` **Component:** ```javascript 'use client'; import { useActionState } from 'react'; import { submitForm } from '.\/actions'; function ContactForm() { const [state, formAction, isPending] = useActionState(submitForm, null); return (