Стоит ли разделять useWatch на отдельные вызовы, чтобы избежать лишних срабатываний useEffect в React Hook Form?

Question

[Андрей Рафальский]

Я использую React Hook Form вместе с useWatch и useEffect. Сейчас я отслеживаю несколько полей с помощью одного вызова useWatch:

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

Затем я запускаю валидацию в useEffect:

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

Проблема в том, что useEffect срабатывает даже в тех случаях, когда изменяется только bank_name, хотя bankName не указан в массиве зависимостей.

Похоже, это происходит из-за того, что массив, возвращаемый useWatch, пересоздаётся каждый раз при изменении любого из отслеживаемых полей. В результате, даже если объект facilities не изменился логически, useEffect считает его изменённым из-за новой ссылки.

Когда я выношу bankName в отдельный useWatch:

const bankName = useWatch({ control, name: 'bank_name' });

…проблема исчезает и useEffect больше не срабатывает лишний раз.

❓ Вопрос:
Является ли хорошей практикой разделять useWatch на отдельные вызовы для каждого поля, чтобы избежать лишних перерендеров и неконтролируемых срабатываний эффектов?
Или существует более корректный способ отслеживания нескольких значений формы с точной реактивностью?

Comments

[Антон Иванов]

Если коротко - то в целом да, это нормальная практика. Когда вы в useWatch (да и в useSelector, useState) возвращаете объект, при изменении хотя бы одного из его (объекта) свойств считается что изменился весь объект (что в общем то логично). Если вам нужно остлеживать только одно свойство объекта - то ваш путь верный.