Задать вопрос
@Andrey1302
FullStack Developer (React.js | Node.js | Nest.js)

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

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

Войдите, чтобы написать ответ

Похожие вопросы