This New React Hook Changes How You Use Forms

React recently announced a new experimental hook that makes working with forms so much easier. This hook solves issues related to double submitting forms, loading states, and so much more.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:57 - Traditional Solution
02:45 - useFormStatus Solution

#ReactJS #WDS #useFormStatus

[GaryMenzel]

I'll at least echo some of what has already been said. React Hook Form has a lot of additional features that this new hook wont cover - so I'll be sticking with that. While I don't consider it to be "magic" (clearly the <form> tag now has a context associated with it), it still feels like a little bit of "sleight of hand-ish". In RHF you explicitly have to use their context component to be able to refer to the enclosing form in child components. So there is some level of "mystery" with this new React hook. I can see that it may help isolate naming conflicts but just how many places in a component containing form do you really need a "pending" state? If you are writing tightly-purposed components... maybe once in that component? So I think naming clashes are going to be rare.

Also, as pointed out, there's not much difference in the amount of code being written and the benefits come more to those using React in a SSR environment - especially where FormData is prominent.

[dmytrk]

I'm using react-hook-form for this and it gives additional benefits, such as schema validation with various libs (Yup, Zod, etc.)

[MrMudbill]

The input ref wasn't really needed in the previous implementation anyway, since you automatically get refs for named inputs within forms in the FormEvent given in onSubmit. You can have a near-identical implementation for onSubmit by doing `const data = new FormData(e.currentTarget)`.

[Avarn]

Nice. It was just dealing with this bug in my application so seeing this being addressed with a new hook, it’s right up my alley. Thank you.

[YourEverydayDeveloper]

react solves problems that react has created in the first place

[caincobain]

that's exactly how remix run are handling forms, I was surprised how no one in the comment or even you Kyle did monition it.

[anonymous_dev]

Kyle, pls bring out a full length react course on youtube 🙏🏻

[mma]

Mantine’s useform + zod feels light years ahead tho

[hassanshahid]

your course is best for React Hooks, Appriciated

[magicfibre]

Is passing a callback to the "action" something that also comes with the new React version, or is it something that exists already?
If it's available in the current version of React, why aren't we using it instead of onSubmit?

[joepetrillo]

Does anyone have a guess on when these new hooks will be released as stable? Seems like they should have existed long ago.

[fave]

Nice video. I prefer the first method though. At times, there may be some logic to be done like show a toast and just having one loading state that's your single source of truth seems easier and more straightforward.

[noelethan]

Great tutorial, can see react is getting a PHP feel

[kaas]

This seems pretty similar to AntD implementation of Form but, it's good to have this out of the box.

[Pedro-yqro]

Hey Kyle great vid, listen how can I use env vars with vite + react?

[greybluesea]

BTW, does the 'data' of 'FormData' type has a method to allow us to set it blank right after submit?

[williamliu]

would you use this over react hook form?

[bikbokken]

When will your NextJS course be released on your course platform? :D

[cymhscn]

The only channel whose speed I'm slowing down.

[helleye]

if only this wasn't formdata I'd be excited. But I really don't like working with that. I mean sure it's native and it technically makes sense, but json is just so much nicer most of the time. Only time I use FormData is with file upload, and I always hate every minute of it.