How to conditionally disable the submit button with react-hook-form?

const { 
    register, 
    handleSubmit, 
    formState: { isSubmitting, isDirty, isValid } // here
  } = useForm({ mode: "onChange" })


<button
  type="submit"
  disabled={!isDirty || !isValid} // here
>
  Comment
</button>

The best solution I found so far using formState and by setting the mode to onChange.

 const { register, handleSubmit, formState } = useForm({
    mode: "onChange"
  });

And on the submit button:

<button disabled={!formState.isValid}/>

Based on this issue: https://github.com/react-hook-form/react-hook-form/issues/77

onChange mode explanation from the documentation:

Validation will trigger on the change event with each input, and lead to multiple re-renders. Warning: this often comes with a significant impact on performance.

you can use formState => isDirty which means form is been modified.

https://react-hook-form.com/api#formState

here is a working example for formState below:

https://codesandbox.io/s/react-hook-form-v6-formstate-ht098?file=/src/index.jsx:423-432

<input disable={formState.isDirty} type="submit" />

Close but I think the logic is slightly off from the other comments. The key is to use the && operator. Credit to the example with the Formik library.

const { formState: { errors, isDirty, isValid } } = useForm()
///...
<button type="submit" disabled={!isDirty && !isValid}>
Continue
</button>