useActionState

import { useActionState } from 'react';

interface FormState {
  message: string;
  errors: Record<string, string>;
}

async function submitForm(prev: FormState, formData: FormData): Promise<FormState> {
  const email = formData.get('email') as string;
  const name = formData.get('name') as string;

  if (!email.includes('@')) {
    return { message: '', errors: { email: 'Invalid email address' } };
  }

  await fetch('/api/subscribe', {
    method: 'POST',
    body: JSON.stringify({ email, name }),
  });

  return { message: 'Subscribed successfully!', errors: {} };
}

function SubscribeForm() {
  const [state, action, isPending] = useActionState(submitForm, {
    message: '',
    errors: {},
  });

  return (
    <form action={action}>
      <input name="name" placeholder="Name" />
      <input name="email" placeholder="Email" />
      {state.errors.email && <p style={{ color: 'red' }}>{state.errors.email}</p>}
      <button disabled={isPending}>{isPending ? 'Submitting...' : 'Subscribe'}</button>
      {state.message && <p style={{ color: 'green' }}>{state.message}</p>}
    </form>
  );
}

import { useActionState } from 'react';

// Server action (in a separate 'use server' file)
async function createTodo(prev: { todos: string[] }, formData: FormData) {
  'use server';
  const text = formData.get('text') as string;
  // Save to database...
  return { todos: [...prev.todos, text] };
}

function TodoForm() {
  const [state, action, isPending] = useActionState(createTodo, { todos: [] });

  return (
    <div>
      <form action={action}>
        <input name="text" placeholder="New todo..." />
        <button disabled={isPending}>Add</button>
      </form>
      <ul>
        {state.todos.map((t, i) => <li key={i}>{t}</li>)}
      </ul>
    </div>
  );
}

import { useActionState } from 'react';

type Step = 'details' | 'confirm' | 'done';
interface WizardState { step: Step; data: Record<string, string>; error: string | null }

async function wizardAction(prev: WizardState, formData: FormData): Promise<WizardState> {
  const action = formData.get('_action') as string;

  if (action === 'next' && prev.step === 'details') {
    const name = formData.get('name') as string;
    if (!name) return { ...prev, error: 'Name is required' };
    return { step: 'confirm', data: { ...prev.data, name }, error: null };
  }

  if (action === 'submit' && prev.step === 'confirm') {
    await fetch('/api/register', { method: 'POST', body: JSON.stringify(prev.data) });
    return { step: 'done', data: prev.data, error: null };
  }

  if (action === 'back') {
    return { step: 'details', data: prev.data, error: null };
  }

  return prev;
}

function Wizard() {
  const [state, action, isPending] = useActionState(wizardAction, {
    step: 'details', data: {}, error: null,
  });
  // Render form steps based on state.step...
  return <form action={action}>...</form>;
}