Trouble displaying a sum of values with useWatch

[rickykenny]

I have form that asks the user to provide their employment history, which is an array of objects including the date they started the job.
I want to show a message if the user hasn't provided 3 years worth of data.
Although I'll have validation for this as well, the message isn't a validation error; it's an info message.

I am using useWatch to watch the array and calculate the duration, but it doesn't always return the correct values, for example when an item is removed.
watch works better but the form in my project is quite large and I need the performance benefit of useWatch.

Am I doing something wrong here? Any help would be greatly appreciated :)

Here's a codesandbox: https://codesandbox.io/s/rhf-6-total-bg995?file=/src/people.jsx

You can toggle watch and useWatch in people.jsx

Repro steps:

1. On load, duration is correct
2. Remove the 3rd date - the duration doesn't change, and the console still prints 3 dates

[bluebill1049]

useWatch doesn't subscribe to input gets unmounted only the input changing.

[rickykenny]

Thanks @bluebill1049 !
So my only option is to use watch?

[bluebill1049]

let me take a look at your codesandbox after wok.

[rickykenny]

Legend! I've updated my question for a little more context

[bluebill1049]

question: if your deletion is triggered by the user, maybe you can leverage that instead useWatch or watch to determine when an input is removed?