useActionState - React's Latest Critical Hook (Next.js + Server Actions)

Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord

⏱️ Timestamps:
00:00 useActionState quick overview
01:46 Sponsor (Semaphor)
04:27 Server actions explanation
08:08 useActionState with form
11:00 useActionState outside form
14:01 "previousState" parameter
16:39 Recap

#webdevelopment #reactjs #nextjs

[judemusyoki]

You contributed so much to my Nextjs knowledge in the last year, thanks for the good work!

[_tanzil_]

In case you are wondering what if you wanna do some client side validations before calling the "action" of the useActionState hook, just watch carefully this part 11:00 and you will understand what to do. 🙂

ByteGrad, you just made everything clear to me. ❤

[jamj]

Thanks for this great video.

I suggest it is more meaning to write

const [ result, action, isPending ] = useActionState ( createTask, null )

It works for all cases, not only errors

[bobbyboxer]

Thank so so much for all your help. You’ve made my transition to next a hell of a lot easier. Specifically your form related videos! 🙏🏼

[anangyoga]

Hi, thanks for the explanation. now I understand the difference between useFormState & useActionState. Also thank you for giving us example of using useActionState that is not on the Form.

[tjblackman]

Love the pending state! Only thing I need now is a reset method.

[Khalid-jirs]

I think a good use case for previousState is for example tracking how many times wrong credentials have been submitted and block user from trying to login after 3 or 4 or 5 attempts for example

[GrahamBillington]

Absolute legend. I ran into this friction when actions first dropped, and this is the exact solution I was looking for. You've been so helpful with the new next update

[juliusgrisette]

Thank you so much. Maybe future video on useOptimistic as well?
Official docs are very dense

[santiskiffa]

thanks for all your vids, they are so helpful!!

would love to see something on testing a nextjs app with jest (especially the part where you load data from your database)... struggling a lot and they ask that often when applying for jobs.

[EliBates]

Excellent video! For me personally I think this is great for small use cases, but it feels very much not production ready... It leaves a lot to be desired versus things like react hook form, zod, and react query/trpc.

[PrajwalSingh-geke]

Great video! Please make a video on how to use useActionState along with zod validations

[theintjengineer]

This guy's a Master of his Craft.

Thanks, Wesley.

[theintjengineer]

Wesley, on another note (2 actually, haha):
- Do you cover all that `useActionState()` thingy on your React|Next.js Course or is that a feature that was released after the course launch?

- Would you mind creating a small video using Drizzle ORM? It can even be this very same Tasks Project, just using Drizzle instead. And add, say, a `title` field to the `Task` entity, and a, say, check box for a `isCompleted` field, just so it's not exactly the same thing project.😅

Thank youuu!

[mahmoudfarghly]

This hook is way more better than useFormState

[marroos]

At 0:30 i started writing comment when to use useActionState and when useFormState but couple seconds later there was explanation. First watch then ask is good rule lol :-) UseActionState looks very handy. Ty for great explanation with examples.

[suman_js]

Hey dude, love your content. Please use"import server only". It will make sure that your server code does slip into the client side.

[sweethouse]

@ByteGrad I really wish you will do a full next js tutorial. No next js backend. Just the frontend interacting with an external backend, state management if applicable and more

[dusanknezevic]

Hey Wesley, another great and on-time explainer. In your opinion, what is the use case for react-hook-form and even react query when we have all these functionalities already available in next.js that can do most of what those libraries are meant for?
It would be a gem of a video if you could integrate this new information together with Zod and the best practices approach to dealing with forms in React/Next.js. like I remember you did a few times in the past.
Cheers!

[julienheng]

Thank you very much for the tutorial!

But how do you reset the form?