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
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. ❤
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
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
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
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.
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.
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.
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.
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.
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!
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`
@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?);
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 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 :)
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? 😂
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.
@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
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.
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?
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) ?
@@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
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
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
@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
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"
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?
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
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.
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
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).
![ILLSLICK X YOUNGOHM - We're The same [Official Video]](http://i.ytimg.com/vi/yUJNkobYR0E/mqdefault.jpg)
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
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
You contributed so much to my Nextjs knowledge in the last year, thanks for the good work!
Happy to help!
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. ❤
mind sharing?
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
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
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
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! 🙏🏼
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.
Love the pending state! Only thing I need now is a reset method.
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.
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.
Thank you so much. Maybe future video on useOptimistic as well?
Official docs are very dense
Great video! Please make a video on how to use useActionState along with zod validations
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.
the best teacher out there. thank you 🙏
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.
This hook is way more better than useFormState
agreed dealing with pending status in an external component was kindof clumsy
@@daytatech-youtube + using useFormState to retreive data from the server was also annoying
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?
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!
Hey dude, love your content. Please use"import server only". It will make sure that your server code does slip into the client side.
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`
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?
yes
Thank you very much for the tutorial!
But how do you reset the form?
useActionState love it!!
Very clear.thanks!
@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?);
This guy's a Master of his Craft.
Thanks, Wesley.
Enjoy!
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!
I understand why you mentioned React Query but not React hook form. What is the functionality of Next.js that can replace it?
@@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 :)
@@dusanknezevic4028 hey tell me what answer you got.
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? 😂
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.
How about we do form validation in actions and return validation errors?
@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
just use Zustand for state management. It simplifies things a whole lot
What about optimistic updates?
Can i please know what react and next version you are using
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.
Thank you so much
What's the use case of useActionState and react-query I am wondering? Any advantage of using either of these?
Do you have the repository for this new exciting thing you so clearly explained? Thanks!
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?
Using useActionState with useTransition is a good approach ? Or is it not always necessary ?
Thank you in advance 🙏
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) ?
For the delete task part could you not of used an action instead of the onClick?
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
Thanks love your teaching style
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
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
@@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
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
Yeah I’m using Next 15RC in the video, should be stable soon
@@ByteGrad i want this now! jajaja, it's a better approach than useFormState
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
same here
@@XITAXB3AT use dynamic import and use client both
@@reactjs1900 can you share a snippet of code?
Amazing!
@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
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"
How can i clear my input fields after submitting the form using server action?
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?
Yeah they’re more than just functions on the server. They essentially open a POST API endpoint on the server
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
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?
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.
Still RC, but should be stable soon
but form is getting cleared after submition
but i need those prev values to be there only?
Thank you Brad
I am confused 😕 , in documents useAcrionState returns two value , state and Action , but you have a pending too
couldnt get it working on my nextjs project, do i need to update to a higher nextjs version? or use experimental?
It will work in Next 15, I’m using Next 15 RC in the video
please can you make a video about Search and Pagination using server?
just starting the video but isnt it the same as using action with useMutation ?
Could you create a video about Atlassian's new framework-agnostic, low-level dnd library called "pragmatic-drag-and-drop"?
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
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).
Can I return a success message from the action?
it's very helpful
CREATE A VIDEO COVERING ALL ESSENTIAL CONCEPTS OF NEXT JS AND THOSE THAT WILL HELP US IN REAL PROJECTS
thanksss
Can anybody tell me the name of vs code theme that ByteGrad currently using?
I also wonder
how to activate support for it ? i get an error message
PreviousState would be useful for "undo" operation right after user edited something.
Can we use this with redux?
so why is previous state typed as any instead of number
what about useTransition?
canary version only ?
it is work only in canary version nextjs
thats cool 😎
but still sticking with trpc for production hhhh
We returned to react query
great
i cant import useActionState from react like u, i dont know why
Because this is in version 15 RC, it’s not stable yet
How dare you get sponsorship from an actual useful and related service and make the ad something useful to boot?
I just watched: "No - /API, Yes - Server Actions".
Next video reccomended: "No - Server Actions, Yes - useActionState" 😅
i think this hook is still experimental. i cant import it by just entering its name.
I'm using Next 15RC in the video, that's why it works for me
@@ByteGradohk, can we upgrade project from next 14 to 15 with single command?
@@ByteGrad Please, mention it in description or video name =)
Wow
useTransition also helps display pending status during server action execution….
ReactQuery much? 😂😂
Pagination, infinitQuery ...
Let me put tutorial into tutorial, so you have tutorial in your tutorial :D
it is work only in the canary version nextjs