SetError/ClearErrors causes watch to trigger

[danielbattat]

I am trying to create a global error based on the values of multiple fields together. I am using useEffect on the watched form value to check for field changes, and then setError or clearErrors to update the error status.

The issue is that setError/ClearErrors is causing the useEffect to run again (even though the fields themselves have not changed), thereby resulting in an infinite loop.

Sandbox:
I have commented out the lines setting the errors, as they are causing an infinite loop. LINES 24 & 26 should be uncommented.
https://codesandbox.io/s/autumn-dust-bgbvn?file=/src/App.js

What am I doing wrong? How can I achieve a global error based on multiple fields?

[bluebill1049]

wouldn't it be easier just to attach an onChange and setError?

[abidhkm]

I faced the same issue and the onChange solution works
https://codesandbox.io/s/distracted-elion-z2wob

[danielbattat]

That works, I thought there might be an "automatic" way to do it with validate

[duchicong]

I had the same problem with you.
I used setValue instead of using field.onChange and it worked.
I don't know how the setValue and field.onchange mechanism in react-hook-form work :D

[bertoort]

I ran into the same issue using clearERrors. I fixed it by preventing the clearErrors function to run if there are no errors to clear

const hasError = (
  errors: Record<string, unknown>,
  name?: string | string[],
): boolean => {
  if (!name) return Object.keys(errors).length > 0;
  return Array.isArray(name)
    ? name.some(key => errors[key])
    : Boolean(errors[name]);
};

const useFormClearErrors = () => {
  const {
    clearErrors,
    formState: { errors },
  } = useForm();

  const clear = (name?: string | string[]) => {
    if (hasError(errors, name)) {
      clearErrors(name);
    }
  };

  return { clearErrors: clear };
};