Actions — Complete Guide

Actions — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.

8 min read Updated 7/8/2026

On this page

React.js Tutorial · Lesson 54 of 100

Actions

Beginner ✓ → Intermediate ✓ → Advanced → Professional

Advanced · 3 — Production skills · ~18 min read · Module 6: Architecture & React 19

Introduction

This is advanced material: Actions. It is what teams use on live products. Read the example carefully and try changing one line at a time to see what happens. Actions are async functions passed to form action or startTransition. React tracks pending state and resets forms on success. You write less useState for isSubmitting and manual error handling on forms.

You do not need every modern feature on day one. Read this so you recognize the words in job posts and team meetings.

When will you use this?

Learn this when you join a team on React 18/19 or Next.js — not required for your first todo app.

New React apps may use Server Components and Suspense for faster first load.
Next.js jobs expect you to know when code runs on server vs browser.

Real-world: support ticket submit

Zoho support portal passes server action to form — button disables automatically while ticket POST is in flight.

Production-style code

async function createTicket(prevState, formData) {
  const subject = formData.get('subject');
  if (!subject) return { ok: false, error: 'Subject required' };
  const res = await fetch('/api/tickets', { method: 'POST', body: formData });
  if (!res.ok) return { ok: false, error: 'Server error' };
  return { ok: true, error: null };
}

function TicketForm() {
  const [state, action, pending] = useActionState(createTicket, { ok: false, error: null });
  return (
    <form action={action}>
      <input name="subject" />
      <button disabled={pending}>Submit</button>
      {state.ok && <p>Ticket created!</p>}
    </form>
  );
}

What happens in production: Pending UI matches what users expect from native forms — less custom state management.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

async function createTodo(formData) {
  const title = formData.get('title');
  await api.post('/todos', { title });
}

<form action={createTodo}>
  <input name="title" required />
  <SubmitButton />
</form>

Line-by-line walkthrough

Code	What it means
`async function createTodo(formData) {`	Defines a function — often a component or event handler.
`const title = formData.get('title');`	Part of the Actions example — read it together with the lines before and after.
`await api.post('/todos', { title });`	Part of the Actions example — read it together with the lines before and after.
`}`	Closes a block started by { or ( above.
`<form action={createTodo}>`	JSX tag — a UI element or custom component on the page.
`<input name="title" required />`	JSX tag — a UI element or custom component on the page.
`<SubmitButton />`	JSX tag — a UI element or custom component on the page.
`</form>`	Part of the Actions example — read it together with the lines before and after.

How it works (big picture)

formData.get reads named fields.
React calls the action on submit.
useFormStatus in child can show pending spinner.

Do this on your computer

Define async function accepting FormData.
Pass to form action prop.
Use useFormStatus for loading UI.
Read the real-world section and name which part of the app uses this topic.
Run the example locally and confirm the same behavior in the browser.
Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

Change text or labels in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error message, then fix it.
Open React DevTools (browser extension) while running Actions and inspect component props/state.

Remember

Actions = async form handlers built into React 19. FormData collects fields. Less manual submit state.

Common questions

Actions only in Next.js?

Client actions work in Vite too; server actions need a framework like Next.

How long should I spend on Actions?

Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.

What if I get stuck on Actions?

Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.

Where is Actions used in real jobs?

See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.

Questions on this lesson 0

No questions yet — be the first to ask!