Next.js Discord

Discord Forum

useActionState is undefined

Unanswered
Britannia Petite posted this in #help-forum
Open in Discord
Britannia PetiteOP
I'm following the docs here https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#server-side-validation-and-error-handling

But I get "useActionState is not a function". I logged it and it's undefined.

I also tried the nextjs form example but I got the same error.

10 Replies

@joulev useActionState requires I think at least react 18.3.0. useFormState is available, use it (it got renamed to useActionState in react recently)
MeKa
I understand correctly, are you saying that "react, react-dom" must be 18.3.0 in order to use "useActionState"?
@MeKa I understand correctly, are you saying that "react, react-dom" must be 18.3.0 in order to use "useActionState"?
joulev
At least 18.3.0, since the rename announcement was only very recent. If it doesn’t work you have to go up even further, like 18.3.1, 19 beta/rc or react canaries
I wouldn’t do that. If my react has useFormState I use useFormState, if my react has useActionState I use this new name. They work the same way.
@joulev At least 18.3.0, since the rename announcement was only very recent. If it doesn’t work you have to go up even further, like 18.3.1, 19 beta/rc or react canaries
MeKa
dependencies
   "next": "^14.2.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",


action.ts
"use server";

import prisma from "prismadb";
import urlSlug from "@/lib/url-slug";
import { revalidatePath } from "next/cache";
import { z } from "zod";

export async function createNewCategory(
  prevState: {
    message: string;
  },
  formData: FormData
) {
    console.log("createNewCategory girildi!!!");
  const schema = z.object({
    slug: z.string().min(2),
    name: z.string().min(2),
  });
  const parse = schema.safeParse({
    slug: urlSlug(formData.get("slug") as string),
    name: formData.get("name"),
  });

  if (!parse.success) {
    return { message: "Category could not be created" };
  }

  const data = parse.data;
  console.log("data parse => ", data);

  try {
    await prisma.category.create({
      data: data,
    });

    revalidatePath("/panel/blog");
    return { message: `${data.name} category added successfully` };
  } catch (e) {
    return { message: "Category could not be created" };
  }
}
AddNewCategory.tsx
"use client";
import React, { useActionState } from "react";
import { useFormStatus } from "react-dom";
import { createNewCategory } from "@/app/actions";
import { Button } from "@/components/ui/button"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

const initialState = {
    message: "",
};
const NewCategory = () => {
const { pending } = useFormStatus();
const [state, formAction] = useActionState(createNewCategory, initialState);
return (

    <Dialog>
      <DialogTrigger asChild>
          <Button variant="outline">New Category</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
          <form action={formAction}>
              <DialogHeader>
                  <DialogTitle>Add New Category</DialogTitle>
                  <DialogDescription>
                      {`Make category changes here. Click save when you're done.`}
                  </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                  <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="slug" className="text-right">
                          Slug
                      </Label>
                      <Input
                          id="slug"
                          name="slug"
                          placeholder="Category Slug"
                          className="col-span-3"
                      />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                      <Label htmlFor="name" className="text-right">
                          Name
                      </Label>
                      <Input
                          id="name"
                          name="name"
                          placeholder="Category Name"
                          className="col-span-3"
                      />
                  </div>
              </div>
              <DialogFooter>
                  <Button type="submit" aria-disabled={pending}>Add</Button>
              </DialogFooter>
              <p aria-live="polite" className="sr-only" role="status">
                  {state?.message}
              </p>
          </form>
      </DialogContent>
    </Dialog>
)
}
export default NewCategory;
Another big problem is this; When I update to "react, react-dom, next" canary versions, I cannot do it due to incompatibility with other packages.