I've gotten to see a few of these and have really enjoyed them. I'm sure it's a lot of work, thanks! One thing I would love to see an example of would be sub forms within parent forms.
Thanks! I would build two separate forms for such a use case. : hosting the master data : get open by user action and then submit valid form data into the parent form.
You are most welcome, I am not a professional youtube content creator but a library maintainer, just trying to make some tutorials to help developers to understand better.
What if I want to display first name in other component? Before I use onChange to set the value and pass this value as a prop to other component. How can I achieve this with react hook form?
Perfect! The only thing you got wrong was the "a lot of people DOES..." instead of "a lot of people DO". hahaha jk, Thank you for this amazing tutorial.
Thank you for this video! just started using React hook form, and I tried to do the exact same scenario that you illustrated for useEffect confusion! However, for my useEffect, I was trying to automatically update the value of another field when a certain field meets the criteria. e.g. if user fills firstName = bob, then under useEffect, automatically set lastName = smith. I understand from your video that the watch is intended to be used for rendering specific things, but just wondering if there's an alternative way to make my use case work?
I found a way to implement the logic using useEffect. @Bill Luo, do you think it's a good patterned to follow? Note: It's import to check the input name in the options parameter otherwise you'll run the logic on every input change and get a maximum call stack error. useEffect(() => { const sub = watch((data, options) => { if (options.name === "username" && data.username === 'bob') { setValue('lastName', 'bill') return () => sub.unsubscribe() } }) }, [watch]
Is there an example showing the pitfalls of trying to use getValues vs watch? I want to wrap my head around when getValues **wouldn't** trigger a re-render when conditionally rendering some component based on some other form value. Does it come down to when using controller vs. uncontrolled components?
is the watch API suitable for implementing dependency between Select components? for example I have select box A and B, I want the options in B change depending on the selected value of A what is the difference between useState and watch? I feel like it's better to implement the above by useState
Then why don't we have another watch function just for useEffect? You can name them like renderWatch vs effectWatch, right? Or even better with useRenderWatch vs useEffectWatch ?
Thanks for putting the time into making these great guides. I keep coming back to them!
Thanks for your time. React hook form has helped me a lot. Please keep up the tutorials
Thanks, James. I will keep making more similar tutorials to help everyone.
I've gotten to see a few of these and have really enjoyed them. I'm sure it's a lot of work, thanks! One thing I would love to see an example of would be sub forms within parent forms.
Thanks! I would build two separate forms for such a use case.
: hosting the master data
: get open by user action and then submit valid form data into the parent form.
@@bluebill1049 awesome that's how I typically do it. Appreciate it!
New microphone, great! Thanks for your tutorials and for React Hook Form!!!
Thanks for the feedback. I am going to probably redo the start started video as well.
@@bluebill1049 Still need to configure the audio levels. The mic is picking up loud background noise + popping / clipping when you pronounce 'P' & 'S'
This was super helpful and well explained - thanks for the demonstration!
Super glad, we have a new feature coming for the next release that allows you to subscribe formstate outside of React. Stay tuned.
You deserve more subscribers for your vids and the amazing react-hook-form library!
Thank you very much, Max
these tutorials are best. thanks alot
You are most welcome, I am not a professional youtube content creator but a library maintainer, just trying to make some tutorials to help developers to understand better.
很讚解釋得很清楚!!
謝謝了！
What if I want to display first name in other component? Before I use onChange to set the value and pass this value as a prop to other component. How can I achieve this with react hook form?
Thanks a lot .
Welcome ~
Perfect! The only thing you got wrong was the "a lot of people DOES..." instead of "a lot of people DO". hahaha jk, Thank you for this amazing tutorial.
hahaha, my bad. Thanks for the correction.
Thank you for this video! just started using React hook form, and I tried to do the exact same scenario that you illustrated for useEffect confusion!
However, for my useEffect, I was trying to automatically update the value of another field when a certain field meets the criteria. e.g. if user fills firstName = bob, then under useEffect, automatically set lastName = smith.
I understand from your video that the watch is intended to be used for rendering specific things, but just wondering if there's an alternative way to make my use case work?
Do you even need useEffect? maybe you can do that at onChange?
@@bluebill1049
const { onChange, onBlur, name, ref } = register("username")
const customOnChange = (e: React.ChangeEvent) => {
if (e.target.value === 'bob') {
// setValue is deconstructed from useForm
setValue('lastName', 'bill')
}
onChange(e)
}
I found a way to implement the logic using useEffect. @Bill Luo, do you think it's a good patterned to follow?
Note: It's import to check the input name in the options parameter otherwise you'll run the logic on every input change and get a maximum call stack error.
useEffect(() => {
const sub = watch((data, options) => {
if (options.name === "username" && data.username === 'bob') {
setValue('lastName', 'bill')
return () => sub.unsubscribe()
}
})
}, [watch]
Is there an example showing the pitfalls of trying to use getValues vs watch? I want to wrap my head around when getValues **wouldn't** trigger a re-render when conditionally rendering some component based on some other form value. Does it come down to when using controller vs. uncontrolled components?
- watch = trigger render
- getValue = static return form values
is the watch API suitable for implementing dependency between Select components?
for example I have select box A and B, I want the options in B change depending on the selected value of A
what is the difference between useState and watch? I feel like it's better to implement the above by useState
Then why don't we have another watch function just for useEffect? You can name them like renderWatch vs effectWatch, right? Or even better with useRenderWatch vs useEffectWatch ?
Why does that initial value passed as 2nd argument to watch() fails to show up on submit handler..?
same for me..only works if i use setValue before.. i dont like this API not gonna lie but have to use it because person before used it lol
@@dimwillow7113 hook form is the perferct api to handle form in react