Thanks I will check it out

That looks exactly like what I'm looking for, I will test it out when I have time 🙂

@Toyger hello, I hate to bug you again, I used the example in the docs and applyed it to my project and didnt get any luck, so i tried just using their example with and with out zod in a test project. this line of code:
const [state, formAction] = useActionState(createUser, initialState)
throws this error:
TypeError: (0 , reactWEBPACK_IMPORTED_MODULE_1.useActionState) is not a function or its return value is not iterable. I cut and pasted their code in to a fresh project, so not sure why the example isnt working

@Patrick MacDonald had this issue before can you show your action real quick

'use server'
import { z } from 'zod'

const schema = z.object({
email: z.string({
invalid_type_error: 'Invalid Email',
}),
})

export async function createUser(prevState: any, formData: FormData) {
const validatedFields = schema.safeParse({
email: formData.get('email'),
})

// Return early if the form data is invalid
if (!validatedFields.success) {
return {
errors: validatedFields.error.flatten().fieldErrors,
}
}
return {
message: 'Please enter a valid email',
}
}

same one from the example in the docs same error with and with out the zod stuff

Reverse your function headeds

So formData first, then prevState

all that did was put a red line under the createUser Argument export default Signup

Not there

Inside the action

yes i changed it in the action and it created the red line export async function createUser( formData: FormData, prevState: any) {
const validatedFields = schema.safeParse({
email: formData.get('email'),
})

// Return early if the form data is invalid
if (!validatedFields.success) {
return {
errors: validatedFields.error.flatten().fieldErrors,
}
}
return {
message: 'Please enter a valid email',
}
}

im reading that its only supported in next@14.3.0-canary.45 should have support for React.useActionState

it just seems strange that its in the next docs

https://tigerabrodi.blog/nuances-of-server-actions-in-nextjs
https://joulev.dev/blogs/throwing-expected-errors-in-react-server-actions


I know these dont directly answer your question but I would give these a read. Every chance I get I like to link these to people, shines a new light on server actions 🙂

and its already answered, this is just both really goo content

its answered and its not lol using the examples provided by the doc i get TypeError: (0 , reactWEBPACK_IMPORTED_MODULE_1.useActionState) is not a function or its return value is not iterable

Ive never used the hook, but I remember reading something about it being different in nextjs? One sec

Havent read through it fully yet

You need to be on canary.45 at least

If you look at that canary release it states that, not saying you should know that, just giving you references

Support React 19 in App and Pages router:

You dont have to install react 19, nextjs automatically uses the version its reliant on somehow. Not sure of the details.

But if your not comfortable using the canary release you can use this as a work around.

Sorry lots of words 😂 Im reading and learning with you

lol I may hold off, I already have a way of doing it, its just messy. I used the handleOnSubmit and the action just returns a value, I'm only obsessed because I want to<form action={action here} > it is much cleaner

that work around doesn't pass a message I don't think back to the client form I don't think.

You are correct useAction state works in canary 59 for sure with react 19 beta

@Patrick MacDonald found my old thread

tldr, you need to return the initial state you passed in

for all cases

so if initial state had code and message, you need to make sure anything you return, also returns the initial state

Thanks I'll look it over, I bet innthe next stable update useActionState will work for now I have this and canary