formState.isValid return true in initial render with mode onChange,onBlur

[polovi]

Is your feature request related to a problem? Please describe.
With onSubmit mode isValid initially return false but with onBlur, onChange it is true before validation is executed

https://codesandbox.io/s/flamboyant-lake-limo5?file=/src/App.js

Describe the solution you'd like
The form should be invalid until validation is executed

[bluebill1049]

This is expected behavior, react hook form is embraced uncontrolled input. the validation can only be assured after render.

[polovi]

I understand when validation is executed but with onBlur and onChange mode he start with state isValid=true before he really validate inputs and then is changed to false. So with initial render I must add another condition to check false positive state. With initial false value it will be true only when validation is passed

[bluebill1049]

I understand when validation is executed but with onBlur and onChange mode he start with state isValid=true before he really validate inputs and then is changed to false. So with initial render I must add another condition to check false positive state. With initial false value it will be true only when validation is passed

why would you need to do that? it's the second render, this is not going to impact user experience right?

[polovi]

User experience... no. But if I have some conditional rendering like {formState.isValid && <CustComponent values={allWatched}/>} e.g. its rendered in state that in fact is false positive(updated codesandbox). I think it should start as invalid form when validation didn't passed when logically he could validate only after all inputs are rendered.

[bluebill1049]

yes @polovi that's a challenge to solve, if you rewind back to v3 we had false to start with.

if we start as false,

then as we render all inputs

input 1. pass -> render true
input 2. false -> render false

you see multiple re-render will have to decide the form is vald or not, that's the reason why we start with true and re-render only once.

[polovi]

And what if will be possible to enforce initial validation with some useForm() option. So when we know that form is really invalid on start it could skip validation like with mode onSubmit.

[bluebill1049]

it's already optimized to skip with onSubmit.

[cmnstmntmn]

i'm having the same needs for the isValid to be false at start, but i found out that i can use dirty bool as an extra condition to achieve what i needed.

[jacdx]

Hi @bluebill1049, love the library. I was bit by this issue pretty hard today. I'm using RHF in React Native with a form that doesn't have a submit button. So I use watch + a useEffect hook to watch formState.isValid. Based on isValid, I determine when updates should be made to the model. But since isValid gives a false positive, I have to put in a sketchy check. I need to always trust isValid. I understand why you can't know on initial render, but I need to be able to account for this part of the lifecycle. Perhaps a formState.isInitializing or something that would let me know what RHF is doing during this phase. Using @latest and onChange BTW.

[bluebill1049]

Hi @bluebill1049, love the library. I was bit by this issue pretty hard today. I'm using RHF in React Native with a form that doesn't have a submit button. So I use watch + a useEffect hook to watch formState.isValid. Based on isValid, I determine when updates should be made to the model. But since isValid gives a false positive, I have to put in a sketchy check. I need to always trust isValid. I understand why you can't know on initial render, but I need to be able to account for this part of the lifecycle. Perhaps a formState.isInitializing or something that would let me know what RHF is doing during this phase. Using @latest and onChange BTW.

how about keeping a single useRef at your form level?

const isInital = useRef(true)
useEffect(() => isInital.current = false, [])
// isInital.current use this

[jacdx]

Thanks, I think my UI was a bit too clever, so I went a different route with a submit button and all is good now.

…

On Wed, Sep 23, 2020 at 4:41 PM Bill ***@***.***> wrote: Hi @bluebill1049 <https://github.com/bluebill1049>, love the library. I was bit by this issue pretty hard today. I'm using RHF in React Native with a form that doesn't have a submit button. So I use watch + a useEffect hook to watch formState.isValid. Based on isValid, I determine when updates should be made to the model. But since isValid gives a false positive, I have to put in a sketchy check. I need to always trust isValid. I understand why you can't know on initial render, but I need to be able to account for this part of the lifecycle. Perhaps a formState.isInitializing or something that would let me know what RHF is doing during this phase. Using @latest <https://github.com/latest> and onChange BTW. how about keeping a single useRef at your form level? const isInital = useRef(true) useEffect(() => isInital.current = false, []) // isInital.current use this — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1512 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARM2IVYVS4MXWGHOZRTIADSHKBTPANCNFSM4MR24MYA> .