React Hook Form & React 19 Form Actions, The Right Way
Вставка
- Опубліковано 8 чер 2024
- Let's figure out how to get form actions and React Hook Form to work together to get the best from both; client AND server side validation when JavaScript is enabled on the client, and user friendly server side validation when it's not enabled.
🎉 Free Forms Tutorial Series: www.pronextjs.dev/tutorials/f... 🎉
Code: github.com/ProNextJS/forms-ma...
👉 Upcoming NextJS course: pronextjs.dev
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
00:00 Introduction
01:40 Setting Up Client Side Validation
04:30 Calling A Server Action
08:35 The useFormState Hook
10:06 Bringing Back Client Validation
11:24 Using the State From useFormState
15:32 Outroduction - Наука та технологія
Holy shit Jack. Every time I am working my project - I see your videos pop up with exactly the right topic. It's like you are spying on me. You are the best teacher I ever had.
Dude I owe you my life, this was the ONLY place I could find the solutions I needed. Thank you so much
I get the following error:
Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().
same here :(
Same 🥲
About to launch my first freelance production application and this video came at the right time! Used this library at my previous job all the time, but configuring it with server actions was a bit tricky and new to me. Thanks again, Jack! This combined with your "lightning fast" React Context state manager is a power horse setup!
And we are back to 200 response with an error inside
Every time I encounter one of your videos in my UA-cam feed I become a little better at web tech. Thanks for just being there like a tiny jewel amidst all the junk that often pollutes my UA-cam feed. 🙂
Loving the website you built btw Jack!!! Great timing
Next.js is the best thanks for the video and the free forum course!!!
Amazing guide, and thank you for the free tutorials!
I was fiddling with this for a while, didnt quite get with having the client and server validation. Great to know how to do it know! ❤
detailed description of the nextjs form.thanks,♥
Much appreciated, I have spent the whole day trying to do that before watching your video. lol
insanely good and informative! thank you!
Man, this is awesome 💯 This is one of the reasons I ditched react hook form due to the fact I thought I'd be loosing the benefit of server-side validation. Goes to show you that Knowledge is Power. Thanks for this, and I'm checking out your site ASAP 😍
A bit verbose but pretty cool! I'd definitely write some wrappers for handling all the zod stuff and mapping between formdata and objects, 100 line component for just an email form is a bit much.
That's also why I don't like this component pattern with , I usually wrap this with a single component as well. It's great when a library uses it because you can wrap it however you please, but building inputs with more than one component gets tiring pretty fast.
This is exactly how we’ve been doing it in our next.js app router production application. Yes a lot of boiler plate but you get validation at client and the server and status messages sent back from the server to the user. I believe RHF is working on integrating with server actions / react server components which will reduce boilerplate and improve the api for doing all this.
I am also using shadcn so and the above video shown way of doing for both of my projects
you can just achieve this with react hook form and useTransition ;) if you don''t want to wait
using javascript to handle disabling javascript it self, I LOVE IT!
Video montage is awesome
Nice tutorial! react-hook-form offers APIs like setError to manually set the error message if you wanted to target the field with the error and put your message there too.
this is GOLD!
AWESOME!!!
hey Jack! Great video! I followed your fix for the "React form was unexpectedly submitted" case, but now as I tried to add the useFormStatus hook, it doesn't get aware of the pending state, because we are basically making our way around the "action" prop itself. Do you have an idea to solve this? Thanks!
ok sharing my workaround for this: i moved the client side validation to happen while the user fills the form, so it is not necessary for us to call the form.handleSubmit, and this frees the action behavior.
steps: i deleted the "onSubmit" thing from the form and left only the action. then i changed useForm config to contain "mode: 'all'", for it to validate the form not only on submit, but also on blur and on change. and lastly i added "disabled={!form.formState.isValid}" to my submit button
Great video! I dont know if i am ever going to utilise server action since I have dedicated API for my frontend ;')
A nice little withForm HOC would do nicely here.
Cool video Jack! I'm right now dealing with some forms in apps I'm currently working. Just a quick question: since Server Actions are handling the 'POST' request we are sending to the server, what's the purpose of adding the attribute `onSubmit` in the element? Isn't the attribute `action` handling the form submission? Looks like all the client side validation is being made with no problem even without the `onSubmit` attribute, from what I've tested. Thanks again!
This form pattern with fromEntries works nice with flat objects but how would we handle more complex form shapes.
Really great content 👍
Great video! Where would you execute client side optimistic updates with `useOptimistic`?
If anyone gets this error "A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead," here's a fix. Rather than using a reference to submit the form, you can actually use the formAction (2nd array element when instantiating useFormState) as function to pass the submission data directly to the server action. You'll need to adjust your onSubmit function to accept data as its first and only param. This will still only execute once the validation is satisfied. Then, you can execute formAction(data). If you're iterating over your form entries in your server action since it was previously expecting FormData, you won't need to anymore. You'll actually get an error if you still do. Also, with this method you don't actually need the action prop on the form either since you're calling it yourself.
but does it make it still a "server actions" ? or just a function running on the server ? and is it still going to work while JS is disables on the browser ?
I guess that client validation isn't yet supported cause I scanned every github issue and Stackoverflow question to no avail :')
Two things.
Removing the action from kills the no javascript form.
If you use event.preventDefault, or just form.handleSubmit, it kills useFormStatus that just doesn't work no more.
Spent hours fighting this- initial render is fine, then subsequent client renders is where the issue happens. Seems we can't have both no-js form + js validation just yet.
@@iamtlessd I did end up adding it back in.
Great explanation, good way to stay with react hooks when working with server actions. Side question about your chrome browser. This is some type of theme or?
That's the Arc browser.
awesome, but how do we show loading indicator when submit, any suggestion ?
Great video , i learnt a lot of new tricks thank you , but i have one remark , you can give the server actions data returned from validation directly without transform it to formData 😅
thanks for this awesome video! I am a bit confused about Form component from shadcn and native form tag. Do we still need to add a form tag inside Form component and if yes, why do we need to pass form object to it as it is just for UI?
It’s used to pass context to their form components to help abstract some boilerplate is my guess, at least that’s how I would use it
I do it completely differently with react hook form, zod, useTransition and either server action or api route - the trick with server action is really that you do not need to return again the same messages you get from client side validation (my app requires js anyways, so I dont care about nojs) you just need to revalidate data against schema thats it. So I have beatifully working client side validation, with the same validation working on the backend.
Any suggestions how to disable the submit button while the form is submitting? The RHF form.formState.isSubmitting is not working with server actions
I really wish there were a better way to do all this, as it's quite a lot of boilerplate. Especially the part where you need to re-stringify the FormData to pass down the fields from the server if zod validation fails. For example, what if a field is of a numeric or boolean or some other type? Ideally you shouldn't have to convert those types yourself. You already have a zod schema, so it would be nice to reuse it.
I've been tinkering with Svelte's superforms library and it's phenomenal. It gives you all of this for free, and it works with and without JS. Plus you get inline errors and auto-populated field data from the server. The only downside is that it only supports method="POST".
Following you great tutorial, It reloads my page when I submit the form when I add onSubmit beside action. Do you know why?
Question: How is the form resetting? I even downloaded the github code and ran on local machine. It does not reset form after successful submission. And how do i use function like form.reset()? Also 'status' only shows previous state if rendered outside of form. There are some issues with this approach,.
This is amazing! How would you make it for multi-step/wizard forms, so that it works with actions? Normally you make it separate forms and store it in a (global) state, so how would this work for actions?
I might consider using XState for that.
Why wouldn't you just wrap all your steps/slides in a form element?
@@matizbrave Did I say I wouldn't do that? How is that incompatible with XState?
wouldn't work easily with the client side validation for each step. The validation would trigger for the whole form at the end or for the whole form at each step@@matizbrave
@@jherr No no, I was answering the guy above. Nothing wrong with your answer ;)
Why would I want to handle a form when JavaScript is disabled IN A REACT APP???
I need your help, Idk why it doesn't work in a vercel deployment
I'll never understand limiting next.js (full stack framework) to server actions. Use apis? No?
Hi Jack, awesome content as always. Is there any news on the nextjs course ?
It's my full time job. I just released a full tutorial on forms. Should have the first pay-for parts up by the end of March.
@@jherr Awesome news ! Can't wait for the release!
Do you have an example of doing this without ShadCn?
how to show #contact section of a long page, after submitting form with js disabled. #contact section is at last of the page.
Also can tell about the terminal settings
your code does not work when deployed to vercel and javascript disabled
one thing I find useful is that you dont nessasarily have to use formdata , you could pass any parsable object to server action
true, but how can you send File types or Date objects.
What are your thoughts on controlled vs. uncontrolled components? RHF primarily focuses on uncontrolled components. However, in the example you've provided, it's instead a controlled component. Is the trade off worth it?
As long as the value is set during the handleSubmit callback I'm good either way. The only specific reason I could see going with controlled is if there were dependent fields, like fields that enable/disable based on other fields.
@@jherr If i'm not mistaken in your video we assign each input field to a state, making it a controlled. So every key stroke in a field causes a re-render. So the performance gains for using RHF is then lost?
@@Tommy-ev6gv I'm not sure that these inputs are controlled. I'm destructuring {...field} into the inputs, and that could just be managing refs. The example is just following the boilerplate code for form inputs provided by shadcn in their react-hook-form integration section. That wasn't the primary point of the example or the video, which is primarily concerned with keeping the client-side validation functionality of RHF while still leveraging `useFormState`.
I'm also not particularly worried about the performance impact in this case because re-renders in React are expected and in this case would not result in DOM updates even if the inputs were controlled. React leverages a VDOM to ensure that the DOM is never unnecessarily updated. Renders don't updated the DOM directly. Renders create VDOM nodes which are diffed against other VDOM nodes and the DOM is only updated when there is a delta between the old and new tree.
@@jherr Thanks for the quick replies. I tried the shadcn example and I remembered it complaining about the input fields going from uncontrolled to controlled if you don't provided any default values as you do @2:38.
Hi @Jack i tried this and worked by how would we prevent the refresh after submission of the form?
With JavaScript disabled? There is no way to prevent the refresh. That's how web forms work. With JavaScript on then you aren't getting a "refresh".
Excelent video! can you show how to configure Server Actions with xpath?
xpath? like the XML search system?
wow!
How can I check pending state of form ?
Will server action capture custom values that is passed to react hook from without form component, for example using setValue from the useForm
You get the previous state you can leverage. And you can also add hidden values fto the form.
@jherr Normally, I get the previous state, when the form is submitted and I don't call reset from useForm, the form state remains unchanged, the need for access to the old values is because the server action removes the Value when the browser refreshes.
Secondly, I don't need to use hidden inputs to set values after building a component that handles this for me and I can just call setValie to do the rest. Say I have a component that holds crops image and send the value of the cropped image to hook from just calling setValue, why will I need this.
RSC is great, React 19 is cool, but trying to use it to replace everything, creating problems that shouldn't exist in the first place or taking us back to the period where we needed something like react to escape all these is not cool, am yet to understand what it solves.
Can't I just send the values from useForm to the backend without these extra codes
@@stancobridge You can if you don't want to deal with Javascript being disabled.
Do you plan to add paid courses on the pronextjs platform aiming for e2e project development?
Yes.
What if we have a multipage form?
If I disable client side validation, as long as there are validation error, when I submit the form, the page doesn't refresh. But once server side validation passes, the page reloads on submit. Do you also have this issue? Otherwise, great video !
Same. Did you find a solution?
Nice chain
Great video, but I have run into a weird problem that some other people have also mentioned here. Submit (randomly) don't work and error: "Uncaught Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault()." is displayed. Not sure what could be the cause.
I've added some code to the onSubmit in the repo. Have a look and see how that works for yah.
@@jherr It still causes the same error with parallel and intercepting routing
If you are getting that error try this instead:
onSubmit={(e) => {
e.preventDefault();
return form.handleSubmit(() => {
action(new FormData(formRef.current!));
})(e);
}}
@@jherr That works, sort of, as in the error no longer shows up. However, because this new version is calling the action from onSubmit, useFormStatus is no longer giving the pending status.
Something about re-creating the formData object (by doing formData.append() a bunch of times) doesn't feel right to me....is there really no way around this? No way to pass something other than FormData to a server action?
Server actions can take any data format you want (except stuff like functions obviously). The reason we are using formdata here is to pick up the native form behavior that works without JavaScript.
@@jherr Thank you! One thing I still have trouble understanding after watching this (great) video and going through ProNextJs is how file uploads work in this exact stack (react-hook-forms, Zod, shadcn, server actions). Seems like files must be wrapped inside FormData but I could be wrong because I can't get it to work :)
hey, I don't get the point of passing formData into the server actions and do validations in that. In case I already have a backend API, does it more easier to just pass the input to the server action and send the request to the API server?
With that I could hide where I send the request to from my users and that the point of use server action. Does it right?
I don't understand. Would there be a server action in this model you are proposing? Or are you just posting from the client to your service? Confused.
?? Why what you are proposing seems like an additional step ur doing the reverse cause using server action ur just not using backend api in the app router to send request to that external api.
I feel you added another later of complexity
@@Divineleo2023 Well, it's not really ME per se. This is a pretty stock NextJS forms example using server actions. The free tutorial does have API versions. Though I think the state managed by `useFormState` is actually pretty nice. You'd have to manage your own without that, and you'd have to plumb the state back to the original route from the post to get the JavaScript disabled functionality.
@@jherr yes, in the server action function, I just take the form input and sent a request to the backend api and let the backend do the validation
Good idea. But got an error "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`"
I made it working.
//Form Validation
const { register, handleSubmit, reset, formState: { errors } } = useForm({}); //useForm();
const formRef = useRef(null);
const [pending, startTransition] = useTransition();
const onSubmit: SubmitHandler = (data) => {alert('in onSubmit');console.log(data);
//submitAction(new FormData(formRef.current!));
startTransition(async () => { alert('in startTransition'); await submitAction(new FormData(formRef.current!));})
};
hello, im just curious. what if i want to call a toast or something else if the server returns an error?
Sure, you just return some data that indicates a toast and then you render the toast based on that. You can even use CSS to fade it out after a reasonable amount of time.
@@jherr thank you for reply! your tutorial is amazing! i was thinking of using shadcn toast,
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
something like this. how am i gonna call this one?
@@ryanbaltazar5795 I wonder if it is inside useEffect?
@@ryanbaltazar5795 Feel free to jump onto the Blue Collar Coder Discord server and ask your question there. Please READ and FOLLOW the #rules before posting.
So much code!
I think “works even if JS disabled” was a bad marketing plan for a front-end first JS framework. I guess what Vercel and React team trying to pull off is, even JS interactivity is not your first priority, you can still build pages like PHP or similar backend languages (currently what Astro does with official React solution). In other words, steps up and makes a bold move in order to have a better position in the market. NextJS is not taken seriously as a backend solution although it’s a fullstack meta framework. I believe these improvements might change that.
By the way a great tutorial as always Jack. Too much boilerplate IMO and I believe soon there will be a more compact solution (by the help of react hook forms I hope) but it’s good to know we’re getting there.
Progressive enhancement should have been a priority from the start imo.
This does not seem to be working with the latest versions/releases
Next: 14.2.3
React: 18.3.1
React hook form: 7.51.4
Hook form resolvers: 3.3.4
Zod: 3.23.8
What does “not working” mean? What happens versus what you expect.
@@jherr sorry, it does not even get to the server action when I log the values in there
I can't use server action with form have field upload image ... :(
ua-cam.com/video/5L5YoFm1obk/v-deo.htmlsi=3vKi-MzTswKSrC69
How do you add loading states?
I have the same questions since I don't know why but using useFormStatus in a child button is not working. Currently I just use a useState called isSubmitting and manually update it during onSubmit, before formRef.current?.submit() and after it. Like this:
onSubmit={form.handleSubmit(async () => {
setIsSubmitting(true)
formRef.current?.submit()
setIsSubmitting(false)
})}
Good video, but for somereason I've been getting error of "A React form was unexpectedly submitted." with this approach.
Check out the updates source code in the repo.
Hm, I get this error:
Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().
Any idea what might be causing this?
I think that's a transient HMR issue. Try hard refreshing the page without a form resubmission.
Thank you for the suggestion and the excellent videos! I will give it a try. It appears that this approach is not well-supported currently. It seems that to achieve progressive behavior, one should focus on server components and avoid client-side stuff. However, having client-side validation feels so good! I'm sure that this area will evolve as the development of the framework continues. Keep up the great work!@@jherr
@@boombang857 I am running into this issue, did you find a solution?
@@jherr I don't think it is a transient HMR issue-same issue comes back after re-navigating back to the form page. A little research on the web seems to indicate that onSubmit handle is basically not allowed when using an action on the form. Are you sure this method is going to work?
@@drewgoodwin9631 Interesting. It was transient for me. I'll add the preventDefault and if that's stable I'll update the project.
how do you highligth a particular line of code or block of code during presentation what settings or command do yo use
Where is the formdata type coming from?
It's a built in type.
great content, but unfortunately the solution is not working for me
"Uncaught Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead...."
but unfortunately requestSubmit is not working at all
Check out the updated code in the repo.
@@jherr can you explain why would you do this? If we call already the formAction in the onSubmit then what is the benefit of also adding the formAction to the action attribute and the extra complexity with the ref and preventDefault ?
this seem to be enough for me:
That will work fine with JavaScript enabled. It won’t work if JavaScript is disabled. If all you need is JavaScript enabled support then that works just fine.
@@jherr thanks for the quick reply, but still trying to understand the benefit of the ref.
Could you also do
if it should also work with JavaScript disabled ?
@@JelteHomminga I'm sorry, I don't understand the question in the last sentence. onSubmit does not work with JavaScript disabled.
I like how you explain things but I don't like this pattern and it feels unwieldy for complex form or multi form scenarios.
Mantine form tutorial pls sir
Hello everyone, I have a problem that when I submit using useRef, the page keeps refreshing(11:20 minute). How can I solve this problem?
Same. Did you find a solution?
Validation is a pain and always will be.
Prove me wrong
this is completely incorrect as the browser will reload in the code provided. RHF is still drafting the support for server action. in the meantime I suggest to use form.trigger() on the onSubmit prop instead of a form ref submit
form.trigger() is not a function.. But yes it reloads. Any fix?
@@sebap_xc on the useForm there is a trigger function
I do not get it. How is this usable in real senarios?. What I am I missing here? This seems like we are back in the 2000s. What is the issue we are solving ? Multi-step, conditional fields, dynamic fields... this is going to be a maintenance hell in my mind. I am not getting the value proposition of nextjs here. There are clearly better battle tested ways for this.
i haven't watched the full video yet, but for people who are new to react and next.js every new feature is like another level of abstraction, so it is always better than nothing
What do you mean? This demo shows how can you get client/server-side validation using RHF, Zod and React. You don't have to use Nextjs, but it's a popular fullstack framework.
This is how react prepares to cover larger ground and step into backend game more and more. But of course I agree with you about larger multi step forms. This won’t be much of help. But for example a simple job application form or contact form will be working no matter what even visitor’s disabled JS. First thing NextJS solved was fixing empty html pages through SSR. And now server actions and helper hooks. It’s pretty new concept and obviously needs more time to become a mature solution. Yet they’re doing a pretty solid job IMO.
Not sure what you’re comparing this setup to because you don’t say, but it’s a lot easier than how you would do it in the older versions of next.js. Of course there are easier ways to make a simple form… you don’t have to do all this in next.js either. But if you want client and server validation with nice error messages then this setup is easy to replicate and gets you a long way for the amount of code required.
Was there a way of getting both client-side and server-side validation and custom error messages with this little code in the 2000’s? (HTML validation doesn’t count as client side validation).
Also how does this make maintenance harder? Genuinely asking to see if I can help explain or learn something.
This seems too convoluted for what it does, I'd rather not use server actions at all, it feels like we are going backwards
Jack you're a great resource for anything web development, and more. I however need to question the idea of supporting users who have disabled javascript as a worthy investment in a frontend experience, since it will come at a cost. The cost will be felt by the rest of your site's user base who have not disabled javascript. By supporting non-js experiences you will taking away resources that could be invested towards features and UX improvements for a much larger audience, the folks who have JS enabled.
In 2024 should we still care about non-JS experiences? I say no, we're past that.
If you want to support non-JS users, then you must make 100% of your site's UX be functional without JS, or at least the minimal amount to for a user to have the intended "user experience", and this is most likely a large investment, for how much gain? I don't see it worth the cost.
Way too overkilled. Server actions don't actually need a form data as input. That is just to handle an action directly from a form. A way better method is to just call the server action inside the submit callback. You can also wrap the code in a react transition to get the pending state.
Given the video description this approach was intentional-demonstrating how the server component model enables form functionality even with disabled JavaScript. Considering many sites don't prioritize JavaScript-disabled support, I concur that the video title "the right way" isn't optimal.
@@drewgoodwin9631 good point, I haven't thought about that. Although no-one disables JS anymore, and if he does he'd have a limited experience anyway! so personally I still wouldn't implement that way
the onSubmit for my client side validation just gives me an error if i use formRef.current?.submit() and suggested to use formRef.current?.requestSubmit(); i still use the first one regardless of the error but it just refreshes my page instead and if i use the suggested one it does nothing at all
do you ever get
Error: A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you're trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().
when submitting via:
onSubmit={form.handleSubmit(() => formRef.current?.submit())}
but when changing to .requestSubmit(), the form action no longer works...
Check the updated code in the github repo.
@@jherr AWESOME!! Thank you very much!