I need an idea for useStateAction

[UnderprotectionDev]

I am working with Next.js 15.1 and React 19. In my project, I have a PostForm component for creating and updating posts. I want to know whether I should use useStateAction or useAction.

Additionally, could you help me identify if there are any unnecessary fields or missing fields in the code below?

post-form.tsx

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "./ui/input";
import { Textarea } from "./ui/textarea";
import { PostInfer, postSchema } from "@/types/post-schema";
import { useStateAction } from "next-safe-action/stateful-hooks";
import { upsertPost } from "@/server/action/post";
import { Post } from "@prisma/client";
import { toast } from "sonner";
import { useRouter } from "next/navigation";

export function PostForm({ post }: { post?: Post }) {
  const router = useRouter();

  const form = useForm<PostInfer>({
    resolver: zodResolver(postSchema),
    defaultValues: {
      title: post?.title || "",
      content: post?.content || "",
    },
  });

  const { execute, result, status } = useStateAction(upsertPost, {
    initResult: {
      data: { success: false, message: "" },
    },
    onSuccess: (result) => {
      toast.success(result.data?.message || "Post created successfully");
      if (post?.id) {
        router.push("/");
      } else {
        form.reset();
      }
    },
    onError: () => {
      toast.error(
        result.data?.message || "An error occurred while saving the post"
      );
    },
  });

  async function onSubmit(values: PostInfer) {
    await execute({
      ...values,
      id: post?.id,
    });
  }

  return (
    <Card className="w-full max-w-md mx-auto mt-10">
      <CardHeader>
        <CardTitle>Create New Post</CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Title</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter post title" {...field} />
                  </FormControl>
                  <FormDescription>
                    This is the title of your blog post.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="content"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Content</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="Enter post content"
                      className="resize-none"
                      {...field}
                    />
                  </FormControl>
                  <FormDescription>
                    Write your blog post content here.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" disabled={status === "executing"}>
              {status === "executing" ? "Submitting..." : "Submit"}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}

upsertPost.ts

"use server";

import { prisma } from "@/lib/prisma";
import { actionClient } from "@/lib/safe-action";
import { postSchema, PostSchemaType } from "@/types/post-schema";
import { flattenValidationErrors } from "next-safe-action";
import { revalidatePath } from "next/cache";

type UpsertPostResponse = {
  success: boolean;
  message: string;
  error?: unknown;
};

export const upsertPost = actionClient
  .metadata({
    actionName: "upsertPost",
  })
  .schema(postSchema, {
    handleValidationErrorsShape: async (ve) =>
      flattenValidationErrors(ve).fieldErrors,
  })
  .stateAction(
    async ({
      parsedInput,
    }: {
      parsedInput: PostSchemaType;
    }): Promise<UpsertPostResponse> => {
      const { title, content, id } = parsedInput;

      try {
        await prisma.post.upsert({
          where: { id: id || "" },
          update: { title, content },
          create: { title, content },
        });

        revalidatePath("/");

        return {
          success: true,
          message: `Post ${id ? "updated" : "created"} successfully`,
        };
      } catch (error) {
        console.error("Error upserting post:", error);
        return {
          success: false,
          message: "Post operation failed",
          error,
        };
      }
    }
  );

post-schema.ts

import { z } from "zod";

export const postSchema = z.object({
  id: z.string().optional(),
  title: z.string().min(2, {
    message: "Title must be at least 2 characters.",
  }),
  content: z.string().min(2, {
    message: "Content must be at least 2 characters.",
  }),
});

export type PostInfer = z.infer<typeof postSchema>;
export type PostSchemaType = z.infer<typeof postSchema>;

safe-action.ts

import { createSafeActionClient } from "next-safe-action";
import { z } from "zod";
export const actionClient = createSafeActionClient({
  defineMetadataSchema() {
    return z.object({
      actionName: z.string(),
    });
  },
});