issue: useWatch not triggered after form reset() to empty object

[garrrth]

Version Number

7.43.9

Codesandbox/Expo snack

https://stackblitz.com/edit/react-ts-zogyhj?file=App.tsx,style.css,UseWatchComponent.tsx,WatchComponent.tsx,ValuesComponent.tsx

Steps to reproduce

1. Go to https://stackblitz.com/edit/react-ts-zogyhj?file=App.tsx,style.css,UseWatchComponent.tsx,WatchComponent.tsx,ValuesComponent.tsx
2. Click on Reset To Values
3. Form has values and useWatch, and watch methods get triggered with values
4. Click on Reset to Nothing
5. The watch method from useFormContext appears to have been reset, but the useWatch doesn't get reset, even when defined before the reset methods. On second click of Reset to Nothing, useWatch gets triggered with empty object.

Expected behaviour

I would expect useWatch to be triggered with the updated values that are used with the form.reset method the first time it is set to an empty object, in the same way that it is triggered when the form is set to an object with values.

What browsers are you seeing the problem on?

Chrome, Edge

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[devakrishna33]

I can confirm that this is happening.

The reason useWatch is clearing in the second time because,

The reset function resets the form values to the default values if no value or empty object is passed as first argument.
When you call reset with some value and if you did not set the keepDefaultValues prop to true, it will replace the existing default values with the one provided as the first argument to reset.

In this case, on click of "reset to values" your default value is updated to the object you have provided that is { a: 'value', another: 123, }, now on click on "reset to nothing" it resets your form with the values you provided before because you're passing an empty object to the reset function, note that at this stage your default value is again replaced with an empty object, hence on second click "reset to nothing" seems to work. You can test this by setting keepDefaultValues to true in the "reset to values" onClick function.

Regarding the issue where useWatch and watch are returning different results because in the reset function useWatch is updated using this value,

const values = formValues && !isEmptyObject(formValues) ? cloneUpdatedValues : _defaultValues;

while the watch method is updated using

_formValues = props.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneUpdatedValues;

Both gives different results when object is empty, in the first case _defaultValues is used and in the second cloneUpdatedValues is used. @bluebill1049 if you think this behaviour should be modified, I request you to assign this issue to me, and I'll be able to submit a PR fixing this issue.

[bluebill1049]

thanks @devakrishna33 for looking into this 🙏 let me know if you need any help.

[garrrth]

Thanks for looking into this and for the great explanation @devakrishna33. Appreciate the help. I can confirm that using keepDefaultValues has solved the issue for me 👍