issue: watch and useWatch methods perform differently watching useFieldArray fields

[amalcaraz]

Version Number

7.45.2

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-usefieldarray-template-forked-7vk2rg?file=/src/index.js

Steps to reproduce

1. Add new 4 or 5 fields to the useFieldArray using the "Add" button
2. Modify each one with different random values
3. Check the different results using watch(), watch('array'), useWatch({control}) and useWatch({control, name: 'array'})
4. Click on Add again and notice how some of the results were updated before and others are only updated after clicking Add

Expected behaviour

Reading the docs useWatch and watch should work on the same way with the exception that useWatch could have a better performance when it is used in isolated components, avoiding re-renders on higher scope components.

The expected behavior is that both methods should return different javascript refs to array objects not only when new items are add or removed from the array itself, but also each time an item is updated by its onChange controlled handler.

In the linked code you can see that if we modify some of the items "value" prop, the useMemo which computes the result and has the array field ref in its dependency array will be re-evaluated only if we used useWatch().
Otherwise, if watch() was used for watching the array, the results depending on it will only be re-evaluated if we add / remove or modify the array directly.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

Click on Add again and notice how some of the results were updated before and others are only updated after clicking Add

Watch API re-render at the root
While useWatch will need to re-render at the hook level.