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

Рейтинг: 0Ответов: 0Опубликовано: 28.07.2025

Я использую 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 на отдельные вызовы для каждого поля, чтобы избежать лишних перерендеров и неконтролируемых срабатываний эффектов? Или существует более корректный способ отслеживания нескольких значений формы с точной реактивностью?

Ответы

Ответов пока нет.