useActionState First Thoughts

To summarize briefly,

useActionState is a new React hook that is used to help simplify form actions, by handling state, errors, and pending states.

I used this recently on a website to create a contact form and I found useActionState to be remarkable helpful.

I created the server component to make the call to the email service and then return a simple flag:

return { success: true }

or an array of errors.

Then in the client component we call useActionState(serverFunction, initialState) with our server function and the initial state and destructure it give us state, formAction, and pending.

const [state, formAction, pending] = useActionState(serverFunction, initialState);

formAction we pass to the form itself in place of the action.

jstate gives us our array of errors or success message which I'm using to display toast messages.

pending is being used to show a loading message while waiting for the response.