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