function Form() {
  const [isPending, setIsPending] = useState(false);
  const [error, setError] = useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setIsPending(true);
    setError(null);
    
    try {
      await submitForm(new FormData(e.target));
    } catch (err) {
      setError(err.message);
    } finally {
      setIsPending(false);
    }
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

function Form() {
  async function submitAction(formData) {
    "use server";
    await saveToDatabase(formData);
  }

  return (
    <form action={submitAction}>
      <input name="email" type="email" />
      <button type="submit">Subscribe</button>
    </form>
  );
}

import { useActionState } from "react";

function Form() {
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await subscribe(formData.get("email"));
      if (error) return { error };
      return { success: true };
    },
    null // initial state
  );

  return (
    <form action={submitAction}>
      <input name="email" type="email" disabled={isPending} />
      <button disabled={isPending}>
        {isPending ? "Subscribing..." : "Subscribe"}
      </button>
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">Subscribed!</p>}
    </form>
  );
}

import { useOptimistic } from "react";

function TodoList({ todos, addTodo }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { ...newTodo, pending: true }]
  );

  async function handleSubmit(formData) {
    const newTodo = { text: formData.get("text"), id: Date.now() };
    addOptimisticTodo(newTodo);
    await addTodo(newTodo);
  }

  return (
    <>
      <form action={handleSubmit}>
        <input name="text" />
        <button>Add</button>
      </form>
      <ul>
        {optimisticTodos.map(todo => (
          <li key={todo.id} style={{ opacity: todo.pending ? 0.5 : 1 }}>
            {todo.text}
          </li>
        ))}
      </ul>
    </>
  );
}

import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();
  
  return (
    <button disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form() {
  return (
    <form action={submitAction}>
      <input name="email" />
      <SubmitButton /> {/* Knows when form is submitting */}
    </form>
  );
}

// Server Action - runs on server
async function serverAction(formData) {
  "use server";
  await db.insert(formData);
}

// Client Action - runs on client
async function clientAction(formData) {
  await fetch("/api/submit", { body: formData });
}