Forms with React 19 and Next.js

[@mskutle]

I just want to drop a comment to say that you’re really good at explaining things clearly and effectively. All of your videos are super high quality, both content and production wise. Thanks!

[@leerob]

Thank you!

[@LeviOne-d4j]

Thank you@@leerob ! Also, it’s clear how much care and effort you put into helping others. Beyond your expertise, you seem like such a good and kind person-thank you for being you.

[@goodbusiness9674]

I did a variation of this for a very similar contact form where I had the client side validation checked only when the submit button is hit. I then had the submit button not able to actually trigger the server action with useActionState until all the client side validation was passed. Then I would use the pending state and a slight artificial delay from the server action to play the Loader2 spinner. I had it setup similar to your way at first but feel like this new way will reduce the amount of times the server action actually gets triggered and also stops the client side validation from updating every single character that is pressed before the user is even done. Great video! Would not have been able to figure out useActionState without the all the examples on the docs and the v0 template that was recently put up.

[@codinginflow]

Now I have to decide between React Hook Form's , Shadcn's and Next.js'

[@faizanahmad2318]

Thinking the same thing 😂

[@maskman4821]

what's the differences?😂

[@ontanicolae1794]

Doesn't shadcn use react-hook-form?

[@M1a2n3o43]

@codinginflow Why do tutorials on Next.js forms always focus on basic examples like email/password? Real-world forms often include file uploads, multi-step flows, and dynamic fields. I’ve been struggling to get **shadcn** working with **React Hook Form** for file uploads. Florian, a video on this (and other advanced scenarios) would be amazing!

[@RamaGuptaOfficial]

Big Fan !

[@bugged1212]

One can easily take this further and also have real time server side validation going. Works like a charm.

[@MaxRohowsky]

Sup Rob, would be great to see a video on server actions with file uploads (e.g. images, PDFs etc.). - How do you validate the file type/size? - How do you persist the file after form submission so the form doesn't reset? - How can you bind additional inputs? Best, Max

[@gaming_zen_99]

How about a video about proper state management.

[@ra2enjoyer708]

Define "proper". Most state being server-side is the proper state management from the dawn of internet.

[@gaming_zen_99]

@@ra2enjoyer708 Currently I'm sifting from frontend global state management ( zustand, recoil etc ) towards url state management & cookie based global state management. There's not much content about how to actually do global state management for like theme, auth etc after the whole CSR & SSR combined development in Next.js. So I was hoping you would shade some light on this matter. Thank you.

[@leerob]

You're on the right track with URL state + cookies. We have some examples here: github.com/vercel/commerce

[@blankcheckguy69]

@@leerobso nuqs?

[@hashproton]

to complement, modal state without route interceptors.

[@frantisek_heca]

Can anyone explain me like I would be 5, the part in 2:00 ? If the default for components is "server". Why should I add "use server" at all?

[@LutherDePapier]

There was a weird error in the beginning near 1:49 that said "Functions cannot be passed directly to Client Components" even though theoretically without a directive on top of the file the Page component and all of its children are supposed to be React Server Components. I understand that as soon as the form accepts an action prop it defaults to being a Client Component, but if so React ought to tell developers to make the form in a "use client" file or something.

[@tshddx]

If I had to guess, I bet they're rendering the form tag as a client component behind the scenes and that's why you get that error message.

[@luisguerra0293]

Great video! Keep the good job. 😄

[@victoreleanya4375]

Thanks for sharing. I previously used state to get default form value

[@jmg9509]

Same

[@victorparenyuk6402]

Nice content! However, we still need to use RHF/Formik when validation is required on each key press (e.g., for an email input) to show an error, not only during validation triggered by the submit button click.

[@codinginflow]

Right. I pick RHF almost every time.

[@fgary]

What if you have a form inside a dialog... Then after the dialog dismisses I want to clear the current state of the useActionState, so that the next time the dialog is opened it starts fresh?

[@Deus-lo-Vuilt]

wow , audio español , Gracias! 🙌🙌

[@eliuddyn]

Amazing 🔥🔥

[@miketoporkov1889]

Looks cool, the only concern is usage of default browser validation, it is a bit ugly.... We definitely need some before function to run client validation with better look before server.

[@leerob]

Yeah, this is possible if you want to customize, just didn't get to it in this video. Generally I still recommend browser validation first

[@magnuserikkeenrobot1117]

@@leerob why do you recommend browser validation? i feel like thats new recommendations. earlier everyone used react-hook-form or similar.

[@trangcongthanh]

@@magnuserikkeenrobot1117 For less js in client I guess.

[@jmg9509]

@@magnuserikkeenrobot1117 I feel like it's two main reasons. First is the double layer validation which reduces chances of errors and incorrect database entries. Second is; why bother sending form data to the server if it can be validated on the client-side? Let the client's device do some work rather than wasting server resources. I bet there's also cost savings in there at scale. Would probably cost massive corps like amazon, and even vercel, hundreds of thousands to millions if client-side form validation wasn't a thing. It's free, easy to do, and saves you money.

[@oemeraran8183]

@@magnuserikkeenrobot1117 Client-side form libraries like react-hook-form are far more superior. I don't want 99% my users to suffer with a worse user experience just to add "progressive enhancement" or "HTML-first" approach. Unless Browsers don't catch up with more customization, using zod + react-hook-form is more or less a no-brainer.

[@MokaPots]

Thank you for this!😀

[@SogMosee]

How to style autofill state? On my dark mode app, when it suggests a form value from google, it forces the background to be white and a bad font and i cant change the styling applied to the input, so its just this jarring strong white background on a dark grey background

[@goodbusiness9674]

Im using tailwindcss and you have to specifically set the focus value styling in the inputs to match your default form input styling. I ran into the same issue. Goodluck!

[@aberba]

Nice one Lee.

[@dirtysouth3291]

I am using Shadcn UI's Form component and my form does NOT reset automatically after submitting - why? Also, how can I add zod to useActionState? Basically, all these things got lost when I abandoned the onSubmit approach and switched to using useActionState / server action

[@FightIQMMA]

There's an issue on NextJS. If you use a form action somewhere where Link from next/link is present, you get the following error: "javascript:throw new 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().')"" There's no way to fix it.

[@unic0rnhunter]

thanks for sharing but one thing i would've loved is how this compares to react-hook-form, which already comes shipped with shadcn/ui.

[@haiffy]

and hopefully if it's better, shadcn uses this as default instead of react hook form

[@leerob]

@@haiffy I'm using shadcn/ui here, and prefer not to use react-hook-form since I get everything I need from the defaults here. If you really need custom client validation, you can use something like conform.guide/ with Zod on the client too.

[@mohamedidaghdour4487]

Thanks for clarification. One question which Neovim plugin are you using?

[@drewhjava]

Lee, something needs to be done about the ergonomics between a server function taking formData vs JSON data, previous state, might be used in useActionState might be used directly, might be used in client component. It's a constant battle of changing usage all of the place.

[@nhansoftech]

So. How to apply onChange for select element. Exp: Selected New York --> and then State Select will to load all states of New York city. Something like that with server component using Server Action ?

[@benaliyimali]

If we use useStateAction we dont need to reaact-hook-forms ?

[@marlonberaldo5609]

Why not just use RHF with Zod on both the client and the server?

[@leerob]

You could!

[@mefju__]

What theme is it?

[@adejoh6650]

Now how do I add zod form validation to the mix??

[@pepew7102]

Ok, but what about if we need more complex client side validation using zod ? Or display a toast after the action is a success ? I find myself submitting a normal function doing all my client side stuff in it (zod, toast, modal, etc) and also calling the server action inside. But in the end, I'm not using useActionState()

[@itztlacoliuhqui]

Just asking, can we trycatch and await the server action in the form action? Would that work?

[@MohanadHani]

Jack actually explained this in detail in one of his older videos: kzbin.info/www/bejne/jH3OZWiAd8prgposi=vqhV350gJ3L7f1rX

[@goodbusiness9674]

It’s pretty much the same as the normal error and success messages shown in the example but you replace them with your toasts. And you can set the form to only be submitted if the zod validation is passed instead of the normal HTML5 validation.

[@nasko235679]

If I want to still do client + server side validation using Zod for both, do I still need react-hook-form to use the zod schemas on the client side, or is there a way to use this new baked in useActionState hook with those schemas?

[@HemantSharmahs]

So then how are we going to make the error or success message go away after some seconds? anuybody?

[@WavyWahidBeats]

Is it possible to use react-hook-form instead of zod?

[@LutherDePapier]

What happens if you lose access to the Internet but don't know it happened, filled a huge form, submit the form, it passes the HTML validations, React erases all inputs, but because there's no Internet the raw data is not sent back from the server?

[@KozaKrisz]

You can easily manage and store this data in localStorage before and after you submit the form, if you need to prepare for such eventualities in a more complex form. You can also delete it from storage if it is successfully submitted.

[@LutherDePapier]

@@KozaKrisz OK. Thanks for the response. But then that means these are not solutions that are native to React as a model. (The native React solution is to use onSubmit instead and to bypass the action prop altogether but it loses progressive enhancement in the process.)

[@KozaKrisz]

@@LutherDePapier I think it's exactly that React's onSubmit that has broken the native browser so far. By default, you had to stop the process there using preventDefault. And with useActionState, you don't have to preventDefault anything, plus you can validate on the server side, which is safer and as Lee showed you can easily report back to the browser the state of the fields and even change their values. On top of that, there's the added bonus of checking the pending status, which can be easily done with the third return value of useActionState.

[@techzealotQAQ]

@@KozaKrisz you can't report back everything easily, such as file or select.we want to control the behavior, but there is no way

[@KozaKrisz]

@@techzealotQAQThere are possible solutions. I am sure about that! You can send back the files also and can read from the state that the hook give us back.

[@alexdin1565]

please can you make videos about Payload CMS and NextJs?

[@AlwaysWeb]

Should I use the pattern attribute of the input tag for complex string validation on the client side?

[@goodbusiness9674]

That’s what I did for inputs such as phone number and such and then I made it so my submit button was what checked the client side validation so the user can’t trigger the server action till all the validation passes and it stops the client side validation from spamming every time a user types a character before they are even done. Also reduces the amount of requests being sent to the server side in general. Good luck!

[@shafu_xyz]

so what does 'next/form' do special?

[@leerob]

I should do a follow up for this :)

[@Luisllaboj19]

@@leerobyess please!

[@JohnMcclaned]

when are we getting partial pre-rendering lee?

[@LutherDePapier]

It's available as a feature flag.

[@JohnMcclaned]

@@LutherDePapier it's been experimental for over a year. it was announced in 2023.

[@TouqeerShafi]

When you use this server action, does it send the ajax request or it send the actual post request on the same page?

[@leerob]

A server action is a POST request back to the same route

[@TouqeerShafi]

@leerob I don’t understand this. The whole point of using JavaScript on the client side was to make pages more interactive and improve the user experience. In the early days of web development, everything relied on postbacks to the server. Then JavaScript introduced AJAX requests, followed by jQuery making things even easier. But now it feels like we’re going back to that old behavior, and I just don’t get it.

[@mohammedaslam1145]

Is this the behavior of forms in nextjs14, because when I submit it in the 14th version, the forms are not emptying out by default in that version. Let me know if this behavior is only in new versions.

[@leerob]

Should be the way it's been working - certainly with v15

[@LutherDePapier]

Hold up. So you can create inline Server Functions anywhere inside a server module, not just within a Server Component?

[@SepehrShapouri]

yes, pretty much

[@leerob]

Indeed. Although generally I still recommend a separate file

[@raghavenderkuppireddy7158]

Thank you ❤

[@tusharphb6596]

Please make a video on server side worker threads

[@itsanishjain]

confused. if default that page is server component that that action should run. am I only one who want's avoid using server actions ok managing errors is really difficult without form actions

[@wchorski]

this is supposed to make it all *easier*, but you could fit all this logic (client validation, client error handling) with React's useReducer(). These are all just fancy useState() wrappers with tailored logic to certain tasks (in this case forms) as for Server Actions, it isn't anything to be afraid of. Like he said, they are essentially API endpoints without the extra setup. But I would be sure to put them in some sort of `actions/` folder as to not cause confusion as to what is client vs server code.

[@itsanishjain]

@@wchorski Yeah than you need to learn things again again and now dev working with me using something different, so much confusion just use API routes and if you are not happy Vercel just quickly host it somewhere else that's better IMO easy to learn and consistent

[@cant_sleeeep]

is server actions the best practice for handling forms

[@leerob]

Yep!

[@developer_bola]

Can you share your code editor name and how to customize it with terminal?

[@devdatkumar4970]

Forms are broken with action! I wanted to implement Zod validation with data persistence in case of validation error else I don't mind the form rest. Well, Server-side validation works well by returning errors and raw data as defaultValue, but it triggers redundant API requests on every failed validation. Thus, It's better to validate on the client first and then send data to the server to revalidate, that will reduce unnecessary API requests due to failed validation, unless client-side validation is bypassed. Well, to handle Client-side validation like react-hook-form, with Zod and the useActionState hook leads to excessive boilerplate. Each form input state and error state needs to be persisted, which increases complexity and boilerplate code. The useActionState hook is incomplete with actions in terms of client side Zod validation. We really need a workaround that.

[@devdatkumar4970]

//excessive boiler-plate code for front-end zod validation. type FieldError = { email?: string[] | undefined; password?: string[] | undefined; }; export default function SigninForm() { const [showPassword, setShowPassword] = useState(false); const [user, setUser] = useState({ email: "", password: "" }); const [error, setError] = useState({}); const [state, dispatch, isPending] = useActionState(signinAction, undefined); const handleAction = (formData: FormData) => { const validationResult = signinSchema.safeParse( Object.fromEntries(formData) ); if (!validationResult.success) { setError(validationResult.error.flatten().fieldErrors); setUser({ email: formData.get("email")?.toString() ?? "", password: formData.get("password")?.toString() ?? "", }); return; } setError({}); dispatch(formData); setUser({ email: "", password: "" }); };

[@up2moose]

Can we get some details on your code editor? Looks slick.

[@leerob]

neovim! vimforreactdevs.com/

[@animezone2768]

Tres belle video. Pls je veux avoir le nom de ton thème si possible la configuration

[@DavidInoa]

Catppuccin

[@DanhezCode]

Code: Chat not found

[@4ndrs_dev]

thanks, lee!

[@aymenbachiri-yh2hd]

Thanks lee

[@iamparmjeetmishra]

amazing...thanks

[@mohitkumawat310]

This won't work for input tags.

[@interceptorghost1149]

Can I have your nvim config?

[@sushantjadhav1475]

Font is to small for mobile 😢

[@hao21291]

just remember to not send back the password field if error happened. that will be a security risk.

[@AnsgarSteinkamp]

The biggest problem with this approach is the lack of proper client-side validation. Default browser validation isn’t just visually unappealing; it’s also extremely limited in functionality compared to something like React Hook Form.

[@KozaKrisz]

You can also write validation on the client side before calling action.

[@jackjameson6826]

@@KozaKrisz Try it, you'll need to prevent running server action (so validate before calling it) and when doing so turn off js and see server action won't run :)

[@KozaKrisz]

@@jackjameson6826 Yeah, that is the reason why I use server-side validation now with Zod. The client side validation can be nice and clean but it is unsafe so I do it on the server only.

[@KozaKrisz]

@@jackjameson6826 Can React Hook Form work without JS? I am not sure about it.

[@jackjameson6826]

@@KozaKrisz What I mean is check video at let's say 4:35. If in useActionState function you add validation and then call submitAddress - it won't run without JS. If you call submitAddress the way it is in the video, form without JS will still submit. That's the thing you find out by trying 😅

[@huntersgaming447]

NVim mmm Intresting...😶

[@jackjameson6826]

The remaining step is to figure out how to add such beautiful under-input validation client-side, without ugly inconsistent browser one

[@LutherDePapier]

You can make a "client action" by using useTransition instead of useActionState.

[@theaminul]

I hope you will provide a starter template for developing a very large SaaS platform. It may include back and front end API design with turbo pack.The backend will be done in one app, the frontend will be in one app, and the API design will be in one app. And everything will be provided with a starter template using totally open source technology!

[@KnowledgeDBman]

Vercel serverless api is too Expensive

[@iriel492ki]

It’s almost 2025 and we’re talking about forms in frontend apps: a problem solved decades ago. God web dev is so cringe.

[@NasifFuad-i8e]

Is this necessary to learn? V0 can do all with a simple prompt

[@cant_sleeeep]

not really. learn it.

[@PeterSahanaya]

well its basically php now 😂

[@manojpudasaini1565]

I want to learn about React hook form + zod + react-query + Nextjs server action from you. Hope for a video explaining about it, if you will prefer, because that is what we use for most of the production level applications in real. Thank you for this one 😄🙏 @leerob

[@lev1ato]

I guess there is no more need for React Hook Form

[@sinashohrat2353]

why everyday there is a new complexity with react and nextjs I'm sick of it

[@n4bb12]

Untyped fields, no client-side state or validation until you submit... The useFormAction model is full of flaws. It extends on what you could previously do with plain forms but not in a viable way that can replace existing solutions.

[@masterize]

Please add React Hook Form for client side validation 🙌

[@cant_sleeeep]

why

[@KozaKrisz]

@@masterize You do not need it. Zod can do the job!

[@masterize]

@@KozaKrisz For a great UX, front-end validation is essential. It's important to provide real-time feedback, validating fields as the user interacts with them, not just upon form submission. For instance, if a field is invalid, you should ensure the error state clears automatically when the user makes changes. Libraries like react-hook-form handle this seamlessly. Relying solely on form submission to display error states feels outdated, like reverting to the web 1.0 era.

[@masterize]

@@cant_sleeeep For UX reason. See my answer to @kozaKrisz

[@KozaKrisz]

@@masterize you can use Zod on client side also… so you can do it in real-time.

[@tonaDIAZ-f6n]

Yo no entiender no sabré no

[@mancuoj]

where is my comment? shadow ban ?

[@nk-me2nw]

don't use next/react if you have a lot of forms :)

[@leerob]

I find React to be quite wonderful for handling forms personally

[@nk-me2nw]

​@@leerob thanks for response, appreciate it! Let me elaborate, I find angular more powerful and robust in form handling, it has two way data binding, complex validation and reactivity, has SSR. React is an option if you need something lightweight but even from your example it looks way more bulky and complex handling a project with a lot of forms might be a pain.

[@jeremymunroe]

AGI will replace us all😔