added a test to showcase the difference in behavior by just subscribi…

…ng to the isValid state

app/src/app.tsx

@@ -23,6 +23,7 @@ import FormStateWithSchema from './formStateWithSchema';
 import SetValueWithSchema from './setValueWithSchema';
 import SetValueWithTrigger from './setValueWithTrigger';
 import IsValid from './isValid';
+import IsValidBreaksValidation from './isValidBreaksValidation';
 import Controller from './controller';
 import UseFieldArray from './useFieldArray';
 import UseFieldArrayNested from './useFieldArrayNested';
@@ -94,6 +95,10 @@ const App: React.FC = () => {
           element={<FormStateWithSchema />}
         />
         <Route path="/isValid/:mode/:defaultValues" element={<IsValid />} />
+        <Route
+          path="/isValidBreaksValidation"
+          element={<IsValidBreaksValidation />}
+        />
         <Route path="/default-values" element={<DefaultValues />} />
         <Route path="/default-values-async" element={<DefaultValuesAsync />} />
         <Route path="/trigger-validation" element={<TriggerValidation />} />

app/src/isValidBreaksValidation.tsx

@@ -0,0 +1,69 @@
+import { debounce } from '@material-ui/core';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useSearchParams } from 'react-router-dom';
+
+export function debouncePromise<F extends (...args: any[]) => Promise<any>>(
+  func: F,
+  wait?: number,
+) {
+  const debounced = debounce(
+    (resolve: any, reject: any, args: Parameters<F>) => {
+      func(...args)
+        .then(resolve)
+        .catch(reject);
+    },
+    wait,
+  );
+
+  const promise = (...args: Parameters<F>): ReturnType<F> =>
+    new Promise((resolve, reject) => {
+      debounced(resolve, reject, args);
+    }) as ReturnType<F>;
+
+  return promise;
+}
+
+function wait() {
+  return new Promise((resolve) =>
+    setTimeout(() => {
+      resolve(null);
+    }, 2000),
+  );
+}
+
+const IsValidBreaksValidation: React.FC = () => {
+  const [params] = useSearchParams();
+
+  const { register, formState } = useForm({
+    mode: 'onChange',
+    defaultValues: { password: '' },
+  });
+
+  const { errors } = formState;
+
+  if (params.get('useIsValid')) {
+    // this should be find for testing
+    const { isValid } = formState;
+  }
+
+  return (
+    <form>
+      <input
+        type="text"
+        {...register('password', {
+          validate: debouncePromise(async (value) => {
+            await wait();
+            if (value.length < 5) {
+              return 'error';
+            }
+            return undefined;
+          }, 1000),
+        })}
+      />
+      <p>{errors.password?.message}</p>
+    </form>
+  );
+};
+
+export default IsValidBreaksValidation;

cypress/e2e/isValidBreaksValidation.cy.ts

@@ -0,0 +1,17 @@
+describe('isValidBreaksValidation', () => {
+  it('it should validate the debounced field validation', () => {
+    cy.visit('http://localhost:3000/isValidBreaksValidation');
+
+    cy.get('input[name="password"]').type('1234').blur();
+
+    cy.get('input[name="password"] + p').contains('error');
+  });
+
+  it('should still work if the isValid field state is used', () => {
+    cy.visit('http://localhost:3000/isValidBreaksValidation?useIsValid=true');
+
+    cy.get('input[name="password"]').type('1234').blur();
+
+    cy.get('input[name="password"] + p').contains('error');
+  });
+});