This is why useFormState and useFormStatus are important
Вставка
- Опубліковано 5 сер 2024
- Chapters generated using ytchaptersgenerator.com
----------
00:00 - Introduction and Experimentation with Next.js
00:33 - Form Validation and Error Handling
01:31 - Form Implementation with JavaScript Disabled
03:00 - Overview of the Form and Server Action
06:19 - Field Inputs and Context Preservation
08:35 - Conclusion and Final Thoughts
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
▶️ Generate Chapters: ytchaptersgenerator.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
Knew this video was coming since that twitter post! lol awesome stuff bro.
Great job Love!
Thanks for the well explained video, dude. I'm at the tail end of Brad Traversy's Next 14 course and doing some refactoring before calling it 'done'. I cannot get useFormState to work right AT ALL. It's driving me nuts and I'm doing it just like you showed, how it was shown in the course's project demo code, and how I see it elsewhere. First time the form submits, the formState just gets set to the initial value. Second time, works normally. If anyone has any ideas, I'm at my wit's end. Doesn't seem like ANYONE ELSE has run into this, which usually means I'm missing a semicolon or have a typo but I've been over it with a fine toothed comb and it WORKS but only after the first submission.
It comes to deciding the advantages of validation on input blur vs js disabled. I guess it’s too valuable to show immediate feedback to user in large forms. This could be pretty neat trick if these hooks would solve it as react hook forms does. Thanks for the video, I wasn’t aware of these hooks.
zod has parseSafe or safeParse function that returns object with success or errors, so you don't have to do try catch
Can you please make the repo available to viewed?
Can I do this soluton without server actions, inside an api route handler?
I like Next. I like nested layouts. I like BFF functions. I hate instability. I just want one question answered by Vercel. Which person thought it would be a good idea to change the order of arguments for a server action depending on if it's used inside useFormState or action={}?
Seriously... That is perhaps the worst API decision I have ever seen from Next.
I think they wanted the interface to be like reducer, because it’s kind of acting like a reducer if you look harder at what it’s doing
But for required field, even without JavaScript, you would just use the browser's required option and safe the server roundtrip, right?
My only problem with this approach is binding users ID. How would you pass the ID to server action in case application has more users and data is stored inside db?
where I can find the validation codes of zod here ?
How would you do client side validated form using server actions? Onblur field validation is pretty common.
Plus how would you do nested array fields array->object->string. I am sure it is possible to recreate the structure using native elements, but it would be a great content for UA-cam. Basically how to replace react-hook-form with server actions, if it is even possible. If not then how to combine them nicely.
wouldn't you use useEffect?
Clean!
I'd like a follow-up on using this with Shadcn-UI and react-hook-form
Yes!
Thank you Sir, for your excellent React videos. I especially appreciate your explanations of useFormState and useFormStatus. They have helped me to better understand and implement React forms.
I really don't like that the input validation is ONLY done on the server. You'll always have to wait for the server response to know your field is valid. What if it is invalid (e.g. "min. 2 characters"), you add some characters to make it valid? Without client-side validation, you only see your validation status after a submit request - and I bet you don't want to send a request for every keystroke. Sure, you have to validate in the server action anyways, but I have yet to see a solution for how to ALSO do the validation on the client (especially for re-validation on input) with REact's new form hooks.
For the best ux, you’d want validation on the server and the client, but in many cases server validation alone gets the job done and keeps your code simplier.
There is also simple validation in the browser without JS, like input type email, URL, etc.
Does this replace using libraries like react hook forms?
I think so because I don’t think react hook forms will work with JavaScript disabled. Again, maybe that’s not important to your app
Cool, really interesting approach for that use case @@WebDevCody
React Hook Forms requires the spread operator for the ...Register method so yes, need JS. @@WebDevCody
These errors should be visible only after the form is submitted but if someone wanna add the functionality like in formik when user type fields starts showing errors. it could be achieve?
This is awesome, make a lib out of it
Is this code in github? I saw your github link is pointing to the root, not to this specific code ( which is extremely useful and I would like to download it )
Is this form stuff with server actions important to know? Me using "use client" with my good old handlesubmit with react hook form is still working 😊😀. Its cool having the app work without Javascript but what use case would my app ever have for that, none.
if your app never has a requirement of "no javascript support", then yeah, use client all the way
I don't know, do we really need to send the client input to the server for validation??
I mean, we are going to depend on the network just to tell the user that the password must be at least 9 characters?
The server should always validate all input from users
@@WebDevCody yes you are right, I don't think I express myself right.
I'm just saying that with this paradigm our app will be making some, to my understanding, unnecessary network calls.
I can't repro how you got the form to return errors with no JavaScript. Seems like no way to get returned data from server actions into RSC. Possibly you are using an obsolete build? Also, useFormState params seem to have changed from your example too. If you have repo link, please post.
I don't think I added this code to any repo. Some how useFormState persists information between the server and client which allows you to know when to show or hide errors.
@@WebDevCody but... doesn't useFormState only work in a client component? (which means JavaScript?)
@@SiliconValleyCodeCampVideos it seems to work fine when you turn off JavaScript. I think it’s because a client component gets one pass through during the server render, so it’s able to hydrate react state on the initial load
is this solution better / faster than using react-hook-form ?
React-hook-form won't work without JS. But overall, RHF is still better IMO.
We are using remixjs at my company, and it has all these functionality for years without server components. And more importantly it is stable. I am not saying that nextjs is bad.
We should say nextjs is highly unstable and full of bugs... They market reactjs canary version as nextjs own production ready features
But remix has not SSG and ISR every page recreates every fetch I am not saying remix is bad
@@ekberehmedzade4768 you don't need that just cache it with a cdn and you get same functionality as ISR and SSG.
shouldnt you use 'use server' on the server action???
you can either have the "use server" at the top of the entire file, or you can put it inside the functions
@@WebDevCody ohhh didnt know that, ty, great vide tho
- what react and react-dom version are you on?
- what next version?
- source code?
idk if they changed the versions and didn;t update teir docs but you example is not working for me neither are the docs , nextjs is trash sometimes
It's just the marketing and hype most of the times..... NextJS is full trash...
Remix is much and for mist suitable option or u should try something outside of react like vue/nuxtJS
7:39 I don't want to be an old man. But this is really basic stuff in PHP.