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
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
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.
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
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.
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.
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!
@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?);
@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
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 :)
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.
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 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) ?
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? 😂
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.
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.
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
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?
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).
@@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
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?
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!
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
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.
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! 🙏🏼
This guy's a Master of his Craft.
Thanks, Wesley.
Enjoy!
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.
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
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.
Great video! Please make a video on how to use useActionState along with zod validations
Thank you so much. Maybe future video on useOptimistic as well?
Official docs are very dense
useActionState love it!!
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!
@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 dude, love your content. Please use"import server only". It will make sure that your server code does slip into the client side.
@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
How about we do form validation in actions and return validation errors?
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 :)
Thank you very much for the tutorial!
But how do you reset the form?
Can i please know what react and next version you are using
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.
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"
Very clear.thanks!
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) ?
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? 😂
How can i clear my input fields after submitting the form using server action?
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.
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?
please can you make a video about Search and Pagination using server?
What's the use case of useActionState and react-query I am wondering? Any advantage of using either of these?
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.
I am confused 😕 , in documents useAcrionState returns two value , state and Action , but you have a pending too
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
PreviousState would be useful for "undo" operation right after user edited something.
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?
but form is getting cleared after submition
but i need those prev values to be there only?
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?
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
Can anybody tell me the name of vs code theme that ByteGrad currently using?
CREATE A VIDEO COVERING ALL ESSENTIAL CONCEPTS OF NEXT JS AND THOSE THAT WILL HELP US IN REAL PROJECTS
Do you have the repository for this new exciting thing you so clearly explained? Thanks!
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).
Using useActionState with useTransition is a good approach ? Or is it not always necessary ?
Thank you in advance 🙏
Thank you so much
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
thanksss
How dare you get sponsorship from an actual useful and related service and make the ad something useful to boot?
how to activate support for it ? i get an error message
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
Amazing!
it is work only in the canary version nextjs
so why is previous state typed as any instead of number
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
What about optimistic updates?
just starting the video but isnt it the same as using action with useMutation ?
it's very helpful
Thank you Brad
great
We returned to react query
Can we use this with redux?
canary version only ?
I just watched: "No - /API, Yes - Server Actions".
Next video reccomended: "No - Server Actions, Yes - useActionState" 😅
i cant import useActionState from react like u, i dont know why
Because this is in version 15 RC, it’s not stable yet
what about useTransition?
thats cool 😎
but still sticking with trpc for production hhhh
useTransition also helps display pending status during server action execution….
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
ReactQuery much? 😂😂
Pagination, infinitQuery ...
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
Let me put tutorial into tutorial, so you have tutorial in your tutorial :D
it is work only in canary version nextjs