React Hooks: Custom useForm Hook
HTML-код
- Опубликовано: 12 сен 2024
- This video is part of Covalence's Full Stack bootcamp! To learn more advanced React topics, checkout our React course: covalence.io/p...
In this walkthrough, we're gonna make a custom useForm hook that can handle any number of inputs you desire.
If you liked this video, we've got a lot more where this came from! We teach people Full Stack Web Development with our premium courses and friendly developer community. You can access it all with our Community Membership. We'd love to have you join us: covalence.io/membership
I've watched a ton of demos about "personal hooks" but none had this dept of information with using personal hooks in forms. Thank you so much !
Very useful, thanks.
Since everyone can create hooks, we need to organize useful ones to share maybe at one place, what'd you think?
Extremely useful. My form was getting very hard to read; this helps a lot.
Awesome tutorial!
thank you so much for this demo, it really helped me a lot, I was stuck with organising my forms ... it was very very useful... the best thing I have ever learn \m/
I believe you can also put state and your onChange in a variable (in the useForm hook), then rename them when destructuring in the actual Form.js, and just spread the object in the input field. . .instead of using the event.persist(). Have you ever tried it this way? If so, which way do you think makes more sense?
Good info!
Thx
Very useful 👍
Great Job!
how would you be able to clear the inputs when you submit the form?
is e.persist() necessary becuz it is an arrow function? can it be avoided by declaring a function() ?
So in React v16 and earlier (the version this older video uses) the React lib would use a concept called "event pooling" as it was a performance increase in older browsers. In v17 and onwards they removed event pooling since modern browsers didn't see much benefit in performance with event pooling.
React
@@covalence-io i got this hook working now gonna use it for form validation. thanks for this detailed response i appreciate it
8:57 If you set values.whatever = 'newVal' your input renders pre-populated with that value, but you are then unable to change that value. Any way to circumvent that?
This code now works without the need to call e.persist() in handleChange. Is this due to React doing some updates/improvements behind the scenes? Thanks
that's true, react says: "As of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled."
The fun part of making videos with modern tech. Gotta re-record every year as the API deprecates and changes. :P
Hi, this hook is very useful. But how do I clean the fields?
You can add a reset function to reset the state
Just return setState along with state and handle change. Then in your forms register function after the console log you just call setState({}) like that and set it back to an empty object.
Subscribed!
{2022-02-22}