Custom validate makes `formState.isValid` return false when no errors exist

Describe the bug Changing validate object using setState causes formState.isValid to remain false even when all fields are valid.

We have a custom input component used throughout our app. It has a prop which specifies “Standard validations” e.g. ID regex, existing IDs etc. It also accepts custom validations. Inside the input component, we combine these two using setState, this seems to be causing this issue.

To Reproduce Steps to reproduce the behaviour:

1. Go to sandbox
2. Input something into the first(required) field
3. You will see that formState.isValid is still false

Codesandbox link (Required) https://codesandbox.io/s/validate-error-on-setstate-puq3g?file=/src/App.tsx

Expected behaviour When the first(required) field is filled, formState.isValid should be true. The second field should only be invalid if a value is entered AND it doesn’t match the ID regex

Desktop (please complete the following information):

• OS: macOS v11.1
• Browser: Chrome
• Version: 90.0.4430.93

Additional context I noticed this when migrating from 6.12.2 => 7.4.0. The issue didn’t occur before migration. After playing around with the versions on CSB, this issue occurs when moving from 7.1.1 => 7.2.0. Here’s the change for that version

[bluebill1049]

no worries @damien-duignan the easiest fix should be just to keep your validation consistent from the initial render, so I would suggest writing your validation logic inside validate instead of useState with external dependency, at least hook form aware it will always have validation rather than first render null and then assigned validation subsequences called.

[damien-duignan]

Thanks, I’ve resolved the issue now