STOP using useState for React forms (there's an alternative method)

There's no need to use the useState hook when writing React.js forms.
⭐️ webdeveducatio...
🔔 Subscribe if you want more free tutorials like this one! kzbin.info...
#reactjs #nextjs #usestate

[@WebDevEducation]

Also, use zod for your form validations 😉

[@maker_aleks]

This approach is good, but… the best UX practice is to validate the field after it was unfocused for the forms longer then 3 fields.

[@eduardoalvarez4457]

in theory you can use onChange() on the input fields and call a function that uses FormData to check the status. FormData is about removing the need of useState for each form. Rather to force people to only validate after submission.

[@Thanveershah]

Great video as always, A quick question, 1. How do we validate on change using this approach? 2. How does this work in case of having step form?

[@WebDevEducation]

If you can, it would be easier to validate on form submit rather than validating every field on change. And for step forms can do the same, when next button is clicked to go to next step, validate the inputs from the current step. You could use useRef to grab the form element in this case.

[@yashsolanki069]

​@@WebDevEducationbut sometimes there is a requirement to validate fields as the input changes so i guess in that scenario we need to use useState. I'm wondering if having third-party lib like react hook form has any downside in terms of bundle size if not then third party lib is better to use right?

[@WebDevEducation]

@@yashsolanki069 yes for sure, if client side validation is required on certain fields then useState is recommended, or if the form is quite large, useReducer. Personally I prefer to use the least amount of 3rd party libs as possible and code things myself, unless (in the context of forms) the form is huge and requires a bunch of validation, then like many people have already suggested, a 3rd party lib really is the way to go. I always wait until I feel like a 3rd party lib is necessary tho, I never just default to using a 3rd party lib. As far as bundle size goes, you want to make sure that the lib supports tree shaking, which will keep the bundle size down. Another thing to consider is the complexity of setting up a form with a 3rd party lib. If it looks intuitive then it shouldn't be a problem, but if you're using a 3rd party lib for a small form that doesn't look so intuitive to set up, better to just keep the code simple and do it yourself imo. Also to make it clear these are just my opinions and despite what I said in the video, there is no right or wrong way 🙏

[@behnoudmst]

Becuase I dont wana use zod or react hook form for small forms that have maybe 3 inputs, I was looking for this. Thanks a lot.

[@saeedd2986]

you got rid of onchange to replace it whit something like useref you see there is a point that pepeol use onchange and onblur and onfocus to make the form be alot more user friendly(ux) but its good if you just need to show validation errors to users after they submit which not the best experience for users

[@kashishrawat-b7f]

I use React useForm library , Its much better to use in Case of forms. Dosen't re-render the webPage on every keypress.

[@WebDevEducation]

👌

[@maskman4821]

Great tutorial, thank you 🙏

[@BaraBrian]

Just use one of the many great form libraries out there. This will end up being more of a hassle than it's worth if you want to deliver a decent user experience

[@WebDevEducation]

Which is your go-to form lib?

[@BaraBrian]

@@WebDevEducation My go-to is usually react-hook-form, mainly because of its light weight and performance. It also pairs up great with zod.

[@meka4996]

Very simple form! Thanks

[@Nethezbet]

Interesting, I did this with state but not near as...verbose? You do need the onChange for each, but only one (not a separate one for each entry) and then dump it into the state as an object. I appreciate that there are so many ways of doing the same thing, I just believe your state example was a bloated method that could be shrunk down significantly. Thanks for the video! I am still learning so it is SO helpful to see so many different ways of doing things.

[@vbtux1]

Great post,Thank you for sharing.

[@fbrse]

Good! But what about two-way bind, in a item edit form?

[@WebDevEducation]

Then you'll probably wanna use useState :)

[@7doors847]

Interesting approach 👍

[@waytospergtherebro]

Hooks are much better and easier to understand than class methods and the fact that there's a new video explaining how to use hooks "properly" every 12 seconds proves it conclusively.

[@WebDevEducation]

It's click baity. Without useState is cleaner in my opinion, but people can do whatever they want 😆

[@MaixPeriyon]

This isn’t good if you need to perform validation on a par element basis

[@WebDevEducation]

In that case you'd definitely want to use useState or a form lib to handle that :)

[@marole-po9ne]

That is for very simple forms only. It is the IMPROPER way for complex forms where there is validation , error handling and need to update the UI. useState and other react use* are the proper way for complex forms. Thanks anyway for this video

[@omarrayes2281]

does it cause rerender as useState when change the value ?!🤔

[@Lukas----]

Any downsides to this method?

[@WebDevEducation]

Plenty. I'd only use this for simple forms that don't require any onChange handlers.

[@PeriklesPeriklesoglu]

thank you

[@lavdev]

If you do that, how can you validate the form?

[@WebDevEducation]

If you want to validate every field use useState or a form lib - otherwise just have a single useState for error message

[@ELMlKO]

amazing video

[@deadwarrior9866]

it still not good if u face multiple field for different purpose

[@WebDevEducation]

Sure, many instances where useState is preferred.

[@mister.kosmos]

next step. use library like formik for forms. and next step after that. use ui kit library like antdesign or material ui :D

[@pfwu7251]

how to clear the form after submit

[@WebDevEducation]

e.currentTarget.reset();

[@arsalanwahidi9234]

let formInputs = event.target; let titleInput = formInputs.elements.your_Input_field_name; your_Input_field_name.value = ''; After successful submission reset value of the input to empty value.

[@Chris-zt4ol]

Cool for simple forms but 1. not typesafe 2. no advanced validation 3. styling wont be fun

[@WebDevEducation]

You can make it typesafe, and do any validation you want with zod. Why would this method mean styling would be different?

[@Chris-zt4ol]

@@WebDevEducation FormData is not typesafe. When you use zod/javascript anyway, why not just use react hook form so you don't have to manage your forms lifecycle. Styling is no fun because you have to write your own logic to handle the form lifecycle + you can't show field specific error messages with FormData

[@WebDevEducation]

Agreed and thats probably a separate discussion with react form. I use react form for more complex forms, but for the rest I waaaaay prefer formdata over a butt load of usestate / value / onchange. Styling tho I've never found it any more painful using formdata over usestate.