React: What are React 19 features for forms?

1async function createTodo(formData: FormData) {
2  "use server";
3  const title = formData.get("title") as string;
4  await db.todos.create({ data: { title } });
5  revalidatePath("/todos");
6}
7
8function TodoForm() {
9  return (
10    <form action={createTodo}>
11      <input name="title" type="text" />
12      <button type="submit">Add</button>
13    </form>
14  );
15}

1import { useActionState } from "react";
2
3function TodoForm() {
4  const [state, formAction, isPending] = useActionState(
5    async (prev, formData) => {
6      const title = formData.get("title");
7      if (!title) return { error: "Title required" };
8      await createTodo(formData);
9      return { success: true };
10    },
11    null
12  );
13
14  return (
15    <form action={formAction}>
16      <input name="title" type="text" />
17      {state?.error && <p className="error">{state.error}</p>}
18      <button disabled={isPending}>Add</button>
19    </form>
20  );
21}

1import { useFormStatus } from "react-dom";
2
3function SubmitButton() {
4  const { pending } = useFormStatus();
5  return <button disabled={pending}>Submit</button>;
6}

1const [optimisticTodos, addOptimistic] = useOptimistic(
2  todos,
3  (state, newText) => [...state, { id: Date.now(), text: newText }]
4);