`useActionState()` is useful when a form action needs to return information that the interface should display, such as field validation errors or a general submission message. It connects the result returned by an action to [React](/courses/reactjs) state. ### Server Action ```javascript 'use server'; export async function createAccount(previousState, formData) { const email = formData.get('email'); const password = formData.get('password'); const errors = {}; if (typeof email !== 'string' || !email.includes('@')) { errors.email = ['Enter a valid email address.']; } if (typeof password !== 'string' || password.length < 8) { errors.password = ['Password must contain at least 8 characters.']; } if (Object.keys(errors).length > 0) { return { errors, message: 'Please correct the highlighted fields.' }; } await saveAccount({ email, password }); return { errors: {}, message: 'Account created successfully.' }; } ``` ### Client Form ```jsx 'use client'; import { useActionState } from 'react'; import { createAccount } from './actions'; const initialState = { errors: {}, message: '' }; export default function RegisterForm() { const [state, formAction, isPending] = useActionState( createAccount, initialState ); return ( ); } ``` ### Important Signature Change When an action is wrapped by `useActionState`, it receives the previous state before the submitted values: ```javascript async function action(previousState, formData) { ``` not simply: ```javascript async function action(formData) { ``` This is a common source of confusion. ### What Does useActionState Return? Conceptually: ```javascript const [state, action, isPending] = useActionState(...); ``` where: ```text state → latest action result action → function passed to the form isPending → whether the action is currently pending ``` ### Expected Errors Should Usually Be Returned Validation failures such as: ```text Email already exists Password too short Required field missing ``` are expected application states. Returning them as structured data makes it easier to display useful feedback beside the correct fields. ### Interview-Ready Answer `useActionState` connects the return value of a form action to component state. The action receives `previousState` followed by `FormData`, and can return structured field errors and messages. [React](/courses/reactjs) then exposes the latest state, wrapped form action, and pending status to the component.