11. Actions, useActionState, useOptimistic and use()

// Form Actions (React 19): pass a function to <form action>
function AddTodo({ addTodo }) {
  const [error, submitAction, isPending] = useActionState(async (prevState, formData) => {
    const title = formData.get("title");
    if (!title) return "Title is required";
    await addTodo(title);                        // async transition: isPending is true meanwhile
    return null;
  }, null);

  return (
    <form action={submitAction}>
      <input name="title" />
      <button disabled={isPending}>{isPending ? "Saving…" : "Add"}</button>
      {error && <p>{error}</p>}
    </form>
  );
}

// Optimistic UI
const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (current, delta) => current + delta);

// use(): read a promise (with Suspense) or context, can be conditional
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(c => <p key={c.id}>{c.text}</p>);
}