errors and formState.errors from the useForm hooks are mutated

If you use errors or formState.errors from useForm, you receive a persistent error object that can be modified later.

It won’t trigger useEffect in code like this, because both errors objects are always the same obejct:

  React.useEffect(() => {
    console.log("errors", errors);
  }, [errors]);

  React.useEffect(() => {
    console.log("formState.errors", formState.errors);
  }, [formState.errors]);

But may also be buggy in cases where this object is used after the fact, not expecting it has been mutated.

Codesandbox link https://codesandbox.io/s/react-hook-form-useform-template-forked-fmljf?file=/src/index.js

To Reproduce

1. open the console
2. click on the “last name” input
3. click outside the input
4. you will see that the component has been updated with the new error, but the useEffect hooks in the code were not triggered.

Expected behavior I expected to have the error object to be able to work with it. For example, use it for analytics. It should also be a unique, unmutable object because else I might send a mutated, later version of it.

Screenshots

Desktop

• OS: Windows 10
• Browser: Chrome
• Version: 86

Related issues: #2893

[bluebill1049]

updated 👍

[vzaidman]

also if you do something like:

React.useEffect(() => {
  setTimeout(() => {
    console.log("formState.errors", formState.errors);
  }, 1000);
}, [formState]);

you are not guaranteed to have the correct errors object. so it would be a good idea to do the following:

React.useEffect(() => {
  const currentErrors = {...formState.errors}
  setTimeout(() => {
    console.log("currentErrors", currentErrors);
  }, 1000);
}, [formState]);