Задать вопрос
@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 на отдельные вызовы для каждого поля, чтобы избежать лишних перерендеров и неконтролируемых срабатываний эффектов?
Или существует более корректный способ отслеживания нескольких значений формы с точной реактивностью?
  • Вопрос задан
  • 105 просмотров
Подписаться 2 Средний 1 комментарий
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽