V7: `form.watch(watchObserver)` causes duplicate updates for the same event.

Describe the bug

It seems that every time the form updates, form.watch creates a new observer, so it starts emitting more and more duplicate events over time.

Codesandbox link (Required)

https://codesandbox.io/s/formwatch-bug-0658y?file=/src/index.js

In this sandbox:

1. Edit the fields. You’ll see only one console.log per change event.
2. Click the update button once or more.
3. Edit the fields again. Now you’ll see duplicate events per change.

To see the bug circumvented:

1. Uncomment the memoized <Watcher /> and comment the unmemoized one.
2. Click update a few times.
3. Edit the fields. There will only be one event per change.

I’m doing a hard-memoize (no deps), so the Watcher cannot respond to changes. In the example, it works, but there’s numerous circumstances in which this would break.

Expected behavior I expect form.watch to register only the most recent observer, unregistering whatever was in place beforehand. (ref-style).

I tried to make this happen using form.watch(useCallback(observer)), but I still got the duplicates.

I also considered using a useWatch in a subcomponent and passing down control instead of form, as I believe this would be ideal, however, useWatch doesn’t support watchObserver as an argument. (I’ve got another FR coming for this so that you can consider it separately.)

Thanks!

[bluebill1049]

Not sure if it’s relevant, but I had the same issue causing me some headaches. Might I suggest updating the documentation and/or example for watch to include the .unsubscribe() because it was only after finding the code below that I figured it out. (Happy to make the PR, but not sure if it was just me missing some obvious piece of information).

https://github.com/react-hook-form/react-hook-form/blob/4241b0cae9ca5647b40607e072ee17287fa04a53/src/__tests__/useForm/watch.test.tsx#L202

sounds good to me, feel free to contribute to the doc and include that piece of information.

[bluebill1049]

Thanks for the feedback @mikestopcontinues I have pinged one of the main feature request issues. I prefer to keep the issue board clean as you know, we don’t have a lot of people to maintain the repo at the moment. I am filtering all the issues as well for duplication.