useActionState doesn’t return the isPending. You are perhaps looking for useFormStatus instead

is that in addition to isPending, I also need to access the data returned by the server action to know if it was a success or an error, from what I understand, useFormStatus does not provide this last value

useFormStatus must be used in a child of the <form> element, not at the same level as the <form> element itself (like useFormState). That’s another thing you should know about.

so would I have to create a separate component just for the button?

Yup

oh ok, it didn't even occur to me to use the 2 hooks haha

thanks

@joulev I reopened the post because I came across another problem
normally for me to know if the action gave an error, I would check if isPending is true and success is false
the problem is that isPending is now in the button component and success is in the form component

maybe I could share the state.success for the button via props? I will try

isPending is false when the action resolves (to success:false), so all you need to check is the state.success

If you want to remove the error state on form resubmit, you can pass the state to a <ErrorState /> component which can then have access to both success and isPending