useEffect is triggered everytime when having form error as a dependency

[AsuraKev]

Hi guys,

Does anyone know why below is triggering the useEffect to run even when the error object are exactly the same.? When i click submit twice, I didnt expect the effect to run because the errors are the same..

thanks! :)

const {
formState: { errors: validationErrors, isDirty, isSubmitting, isValid },
getValues,
setValue,
handleSubmit,
reset,
watch,
control,
} = useForm({
mode: 'all',
resolver: zodResolver(validationSchema),
defaultValues: defaultValue,
});

useEffect(() => {
alert();
}, [validationErrors]);

[sujinleeme]

Could you provide more detailed code including validationSchema and react components?

[AsuraKev]

I have created a codepen to replicate -> https://codesandbox.io/p/sandbox/react-hook-form-get-started-ts-forked-ryyt8f?file=%2Fsrc%2Findex.tsx%3A11%2C33

Try the following actions:

1. Try clear the input, it ll trigger validation. The effect didnt run tho event there is validation error
2. Try clear the input and keep clicking the submit button. The effect fires everytme the submit is clicked even though error object is exactly the same

thanks! :)

[sujinleeme]

The codesandbox link is not found. Can you reshare?

[AsuraKev]

sorry, just made it public -> https://codesandbox.io/p/sandbox/react-hook-form-get-started-ts-forked-ryyt8f?file=%2Fsrc%2Findex.tsx