React: Explain React Server Actions and their use cases

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

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}