Should I split useWatch into individual calls to avoid unnecessary useEffect triggers in React Hook Form?

[andreyrafa]

I'm using React Hook Form along with useWatch and useEffect. I’m currently watching multiple fields using a single useWatch call:

const [isRevolving, facilityGroup, facilities, payerGroupRates, ratesType, bankName] = useWatch({
  control,
  name: [
    'is_revolving',
    'facilityGroup',
    'facilities',
    'payerGroupRates',
    'rates_and_liquidity_type',
    'bank_name',
  ],
});

Then I trigger revalidation conditionally:

useEffect(() => {
  console.log(bankName);
  void trigger('payerGroupRates');
}, [isRevolving, ratesType, facilities, trigger]);

However, I'm noticing that this useEffect is being triggered even when only bank_name changes, despite bankName not being listed in the dependency array.

From what I understand, this happens because the entire array returned from useWatch gets recreated when any of the fields change. That causes object values like facilities to appear as "changed" even when they’re not relevant to the effect.

When I move bankName to its own useWatch like this:

const bankName = useWatch({ control, name: 'bank_name' });
...the issue goes away and useEffect behaves correctly.

❓ So my question is: Is it a recommended practice to split useWatch into separate calls per field to avoid unnecessary re-renders and effects? Or is there a better pattern for watching multiple form values with fine-grained control?