React Academy · Lesson

React Actions & useActionState

Define server and client actions, handle form submissions, and track pending states.

React Actions & useActionState is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will define React 19 Actions, use useActionState to manage form submission state, and handle pending and error states cleanly.

What Are React Actions?

Actions are async functions you pass to the form `action` prop (or button `formAction`). React 19 treats them specially: it tracks pending state, handles errors, and integrates with Transitions automatically.

Server Actions in Next.js

In Next.js with App Router, add 'use server' at the top of a function to make it a Server Action. React calls it on the server when a form submits — no API route needed.

'use server';

export async function createPost(formData) {
  const title = formData.get('title');
  await db.insert(posts).values({ title });
  revalidatePath('/posts');
}

Using an Action on a Form

Pass the server or client action directly to the form's `action` prop. React calls it with the FormData when the form submits.

import { createPost } from './actions';

export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  );
}

useActionState

useActionState wraps an action to give you the current state (last action result) and a pending boolean. The wrapped function is passed to form action.

'use client';
import { useActionState } from 'react';
import { createPost } from './actions';

function NewPostForm() {
  const [state, action, isPending] = useActionState(createPost, null);
  return (
    <form action={action}>
      {state?.error && <p>{state.error}</p>}
      <input name="title" />
      <button disabled={isPending}>Create</button>
    </form>
  );
}

Action Returning State

The server action receives `(prevState, formData)` when used with useActionState. Return an object with success/error info — this becomes the new state.

'use server';

export async function createPost(prevState, formData) {
  const title = formData.get('title')?.toString();
  if (!title) return { error: 'Title is required' };
  await db.insert(posts).values({ title });
  return { success: true };
}

isPending for Disabled Submit

Use the isPending value from useActionState to disable the submit button and show a loading indicator while the action is running.

<button type="submit" disabled={isPending}>
  {isPending ? 'Saving...' : 'Save'}
</button>

Client Actions

Actions do not have to be server-side. A client action is a regular async function without 'use server'. It still gets the pending/state management from useActionState.

async function clientAction(prevState, formData) {
  const res = await fetch('/api/post', {
    method: 'POST', body: formData,
  });
  if (!res.ok) return { error: 'Failed' };
  return { success: true };
}

useFormStatus for Child Components

In a deeply nested submit button, use `useFormStatus()` to read the parent form's pending state without prop drilling.

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Submit</button>;
}

Progressive Enhancement

React Actions with Server Actions work even without JavaScript (progressive enhancement). The browser submits a native form POST to the Next.js handler, making the feature functional before JS loads.

Quick Check

What does useActionState return that allows you to show a loading state while a form action runs?

Recap

React Actions are async functions passed to form action. useActionState wraps an action to give you state, a wrapped action function, and isPending. Server Actions add 'use server' and run on the server.

Up Next

Next lesson: **useOptimistic for Instant Feedback** — you will show optimistic UI updates while a server mutation is in flight.

Frequently asked questions

Is the “React Actions & useActionState” lesson free?

Yes — the full text of “React Actions & useActionState” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “React Actions & useActionState”?

Define server and client actions, handle form submissions, and track pending states. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “React Actions & useActionState” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy