useActionState - NEW in React 19 / Next.js 15 - Critical Hook for Server Actions

[@ByteGrad]

Hi, my latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work! I'm also a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication and more bit.ly/3QOe1Bh

[@jannickpedersen4620]

Have you done a fullstack with Kinde :D? Yeah I like Kinde too, I have an E-Commerce project in NextJS, Stripe and Kinde ect :D

[@judemusyoki7052]

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

[@ByteGrad]

Happy to help!

[@_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. ❤

[@McFlurriez]

mind sharing?

[@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

[@anangyoga1381]

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.

[@jamj2000]

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

[@bobbyboxer2664]

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! 🙏🏼

[@PrajwalSingh-ge1ke]

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

[@juliusgrisette]

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

[@tjblackman08]

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

[@joshuadeguzman2911]

I relate to this comment too much 😂. Jack Herrington did this, too. You can still benefit from progressive enhancement but still have client-side validation and can reset form.

[@КириллАмиров-ц2ф]

the best teacher out there. thank you 🙏

[@Khalid-ji6rs]

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

[@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.

[@EliBates95]

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.

[@avigdev]

Very clear.thanks!

[@eneiarestivan]

i have this warning when use outside forms: deleteButton.tsx:31 An async function was passed to useActionState, but it was dispatched outside of an action context. This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`

[@webdevmix]

I am getting the same error. This applies to 11:00 "useActionState outside of form". I believe the error happens because the action is called from onClick. Would be great if @ByteGrad could provide a solution! Seems he overlooked it in the video.

[@julienheng3880]

Thank you very much for the tutorial! But how do you reset the form?

[@Bratislav_Zdravkovic]

If we receive an error from a server action and we want to show it using a notification (toast), should we use useEffect for that?

[@supermario6397]

yes

[@marroos5440]

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.

[@madmaxdev]

How about we do form validation in actions and return validation errors?

[@kartikkaushik4743]

Thanks love your teaching style

[@theintjengineer]

This guy's a Master of his Craft. Thanks, Wesley.

[@ByteGrad]

Enjoy!

[@suman_js495]

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

[@Grishopping]

Thanks for the video, do you have any video that talks about how to use next.js + turborepo + prisma to translate the above into English?

[@paw565]

What about optimistic updates?

[@jy76312]

Can i please know what react and next version you are using

[@박헌남]

useActionState love it!!

[@MattTheMotorbike]

For the delete task part could you not of used an action instead of the onClick?

[@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!

[@nithinn2632]

but form is getting cleared after submition but i need those prev values to be there only?

[@mrbjjackson]

Thanks for this video. One thing I've noticed is that if you use useActionState to generate your "action" function to run, it is no longer asynchronous. I want to trigger the action, await the result and then run some other code but I am unable to do this... Any idea how we can achieve this? It works fine if I use the raw version of the server action.

[@MusadiqKhan]

@byteGrad - Can you create a video where you talk about redirects in server actions. For example, I have login form and I want to redirect to dashboard

[@AllysonTS]

Wesley this is really awesome. Do you know if this works with a onSuccess to do something with the form? Like the form is in a modal/dialog, after submiting maybe i want to close the modal, and on error maybe show error like u did. Do u know is already possible with serverActions/actionState/transition/formState or whatever they name now days? 😂

[@aymenbachiri-yh2hd]

Thank you so much

[@RitikRaj-we2sc]

When combined with react-hook-form and zod, the client side validation doesn't work.

[@dusanknezevic4028]

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!

[@jihefel92]

I understand why you mentioned React Query but not React hook form. What is the functionality of Next.js that can replace it?

[@dusanknezevic4028]

@@jihefel92 You already have a native browser validation (google Client Side Form Validation MDN), which is quite sufficient react-hook-form replacement in this scenario where you make the full scale server side validation using the useActionState and ZOD. In this scenario I think adding extra client side library is overload, and also may pose some performance issues as well. Off course I may be wrong on this, that is why I posted this question in the first place :)

[@AvikNayak_]

@@dusanknezevic4028 hey tell me what answer you got.

[@sweethouse2773]

@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

[@darkcss1054]

just use Zustand for state management. It simplifies things a whole lot

[@PalladinGOLD]

@ByteGrad Why do you use 3 return value from useActionState (video uploaded 2 month ago). In official docs: const [state, formAction] = useActionState(fn, initialState, permalink?);

[@ruanxun9454]

What's the use case of useActionState and react-query I am wondering? Any advantage of using either of these?

[@tfandrad3]

My state is returning undefined when I put the "use server" directive in the action, when I remove the start it returns normal, but I can't use the "cookies" method, as it doesn't have the "use server"

[@RitikRaj-we2sc]

When combined with react-hook-form and zod, client side validation doesn't work. Can you please tell why ?

[@amitay1599]

The official documentation doesn't provide examples of useActionState being used outside a . You're the first person I've seen using it this way-it does make sense conceptually, but I'm trying to understand if this approach goes against the intended paradigm.

[@mahmoudfarghly2970]

This hook is way more better than useFormState

[@daytatech-youtube]

agreed dealing with pending status in an external component was kindof clumsy

[@mahmoudfarghly2970]

@@daytatech-youtube + using useFormState to retreive data from the server was also annoying

[@sajarmohammed8045]

How can i clear my input fields after submitting the form using server action?

[@troquelina]

Do you have the repository for this new exciting thing you so clearly explained? Thanks!

[@AlexanderBelov-y8o]

Can I return a success message from the action?

[@xzex2609]

I am confused 😕 , in documents useAcrionState returns two value , state and Action , but you have a pending too

[@herozero777]

I'm trying to use this for deployment but when I do `npm run build` I get error that React doesn't have the hook 'useActionState'. Why is this?

[@reactjs1900]

Getting 'Reference error : document is not defined' , cause i am using one outside npm package (client side) in my nextjs 14 app. Tried to make component client side by using "use client" also. This is probably because of nextjs prerenders everything in server. How to fix it. Please help. commenting here cause this is the latest video

[@XITAXB3AT]

same here

[@reactjs1900]

@@XITAXB3AT use dynamic import and use client both

[@XITAXB3AT]

@@reactjs1900 can you share a snippet of code?

[@meka4996]

Amazing!

[@Monstermash355]

how to activate support for it ? i get an error message

[@alexdin1565]

please can you make a video about Search and Pagination using server?

[@CarlosIsaacRSison]

It's been days of researching and I still can't find a tutorial that tackles with the useActionState resetting all inputs, maybe you have a way to disable it? Because if the user made a mistake in 1 field all other fields will reset which is not a good user experience

[@Michaeltje01]

Thank you for introducing useActionState, cheers. What's the benefit for this over a traditional endpoint with an HTTP status code? When you have to repeat the interpretation of state/error about 5 times, I immediately get the feeling something smells iffy. You give a good introduction of the functionality but it does not put it in context properly. I would never want to put this in production.

[@ismailtirmizi]

When will this feature be available in a stable release? I tried to build the Next.js canary and it gives error. I wanted to use this feature in production, any advice in that regard?

[@dejoma.]

How about a getRequest, where you get the data? I have quite some server actions that just 'get data'. That would then be the state? I am wondering why you didn't mention this; maybe I misunderstand the primary use of serverActions; could you elaborate why you don't use serverActions to get Data (and then specifically with this new hook) ?

[@olusanyaolamide9764]

Thank you Brad

[@MicroViewers-j1s]

it's very helpful

[@tristandg]

just starting the video but isnt it the same as using action with useMutation ?

[@nasko235679]

Are server actions "just functions that run on the server" though? Is making a server action with the use server directive the same as executing a function in your server component? AFAIK server actions are only POST requests. What if I use a server action to fetch data from my database? OR what if I just make a helper function inside a separate file that does not have the "use server" directive and then I fetch the data directly in the server component by calling that function, is that the same as calling a server action?

[@ByteGrad]

Yeah they’re more than just functions on the server. They essentially open a POST API endpoint on the server

[@kingston7151]

what do you use to record your videos, i see that it automatically cuts out parts when you aren't speaking that's so cool

[@excalibur2417]

That's pretty cool. Do you happen to know if they will add this to nextjs 14 as well? I don't really wanna mess with next 15 for now

[@ByteGrad]

I’m using Next.js 15 RC in the video. V15 is not hugely different from V14 so upgrading shouldn’t be a big issue

[@excalibur2417]

@@ByteGrad When you have a big project with tons of api routes that will all go from default cached to dynamic it is kind of a big change. I also saw that React 19 is currently extremely slow inside of suspense waterfalls and I use suspense a lot in my apps

[@easy_frontend]

Hello , if i'm using server actions with the useActionState how do i return a custom response for the backend do i do it also in the action file or i create api/router i'm really confused

[@carlosterrazas8913]

I was also confused, in the documentation it says, for mutations (update, insert) use server actions, but to retrieve data use fetching or nextjs api handler(route handler).

[@FaizKhan-jk9po]

Can anybody tell me the name of vs code theme that ByteGrad currently using?

[@wolfie8748]

I also wonder

[@DmGs-h1i]

it is work only in canary version nextjs

[@yj4105]

what about useTransition?

[@mrlectus]

so why is previous state typed as any instead of number

[@doppeltevier]

Could you create a video about Atlassian's new framework-agnostic, low-level dnd library called "pragmatic-drag-and-drop"?

[@ianc6418]

Is this the latest stable release or is it just in the release candidate? I am learning NextJS and don't mess with RC because it hinders my learning progress.

[@ByteGrad]

Still RC, but should be stable soon

[@AleRovella]

could you tell me wich version of react and nextjs are you using? because im having an error when i want to implement it: TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not a function or its return value is not iterable

[@ByteGrad]

Yeah I’m using Next 15RC in the video, should be stable soon

[@AleRovella]

@@ByteGrad i want this now! jajaja, it's a better approach than useFormState

[@abhishek427821]

Can we use this with redux?

[@sawos1596]

Using useActionState with useTransition is a good approach ? Or is it not always necessary ? Thank you in advance 🙏

[@kurwacherry]

couldnt get it working on my nextjs project, do i need to update to a higher nextjs version? or use experimental?

[@ByteGrad]

It will work in Next 15, I’m using Next 15 RC in the video

[@kassiogluten]

canary version only ?

[@EnesKab]

PreviousState would be useful for "undo" operation right after user edited something.

[@kashmirtechtv2948]

CREATE A VIDEO COVERING ALL ESSENTIAL CONCEPTS OF NEXT JS AND THOSE THAT WILL HELP US IN REAL PROJECTS

[@wellbrutin]

thanksss

[@phucoan9098]

i cant import useActionState from react like u, i dont know why

[@ByteGrad]

Because this is in version 15 RC, it’s not stable yet

[@kashmirtechtv2948]

great

[@0xtz_]

thats cool 😎 but still sticking with trpc for production hhhh

[@lukq90]

We returned to react query

[@A.Floatrx]

useTransition also helps display pending status during server action execution….

[@indimerz]

i think this hook is still experimental. i cant import it by just entering its name.

[@ByteGrad]

I'm using Next 15RC in the video, that's why it works for me

[@indimerz]

@@ByteGradohk, can we upgrade project from next 14 to 15 with single command?

[@maxrusakovic]

@@ByteGrad Please, mention it in description or video name =)

[@eliamzg]

How dare you get sponsorship from an actual useful and related service and make the ad something useful to boot?

[@mDHARYL]

Wow

[@ibrvimv]

I just watched: "No - /API, Yes - Server Actions". Next video reccomended: "No - Server Actions, Yes - useActionState" 😅

[@CadisDiEtrama000]

ReactQuery much? 😂😂

[@mrlectus]

Pagination, infinitQuery ...

[@MrFinchBen]

Let me put tutorial into tutorial, so you have tutorial in your tutorial :D

[@protonys]

it is work only in the canary version nextjs