issue: Watched arrays of objects does not update their reference after object field update [useFieldArray]

[DanielMarkiel]

Version Number

7.46.1

Codesandbox/Expo snack

https://codesandbox.io/s/ecstatic-merkle-cdqjgg?file=/src/App.tsx

Steps to reproduce

1. Go to https://codesandbox.io/s/ecstatic-merkle-cdqjgg?file=/src/App.tsx
2. Change text in the 'lastName' input
3. Memoized list of last names below input does not update (reference of the testArray const returned by 'watch' function stays the same)

Expected behaviour

Memoized values built upon watched arrays should update when a field of an object in the array changes.

The last version of react-hook-form where this works correctly is 7.13.0. If I downgrade the package to this version the list updates correctly.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Relevant log output

No response

Code of Conduct

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

[leapful]

@DanielMarkiel

This is the expected behavior for watch() method on field array of react-hook-form latest version and it has been documented in here:

https://react-hook-form.com/docs/useform/watch

Field array data will be the same reference array inside form state to avoid re-rendering therefore using useMemo or useEffect with change deps will not work.

Just remove the use of useMemo to achieve your expected behavior.

Working demo: https://codesandbox.io/s/epic-swanson-gtqhsx?file=/src/App.tsx