В контексте связки React Hook Form и схемной валидации через Yup ключевую роль играет YupResolver, который определяет момент и стратегию запуска проверки данных. Понимание режимов валидации критично для управления производительностью формы, пользовательским опытом и предсказуемостью поведения интерфейса.
Режим валидации определяет событие, при котором запускается проверка значений формы относительно схемы. В связке с resolver логика выглядит следующим образом: React Hook Form собирает данные состояния формы, после чего YupResolver преобразует их в синхронную или асинхронную проверку через Yup-схему. Однако сам факт вызова resolver зависит не от Yup, а от настроек стратегии валидации.
Вся система опирается на три фундаментальных триггера:
Каждый режим представляет собой комбинацию этих событий с различной частотой вызова resolver.
Наиболее строгий и экономичный с точки зрения количества валидаций режим. Проверка выполняется только при попытке отправки формы.
Особенности поведения:
Такой режим характерен для форм, где:
С точки зрения архитектуры это самый простой режим: состояние формы стабильно до момента триггера submit, после чего происходит единичный прогон всей схемы Yup.
Валидация запускается при потере фокуса полем.
Поведение:
Особенность этого режима заключается в балансе между производительностью и интерактивностью. Пользователь получает обратную связь после завершения ввода конкретного поля, но не во время набора.
Типичный сценарий использования:
В этом режиме проверка выполняется при каждом изменении значения поля.
Поведение:
Этот режим наиболее «интерактивный», но и наиболее требовательный к производительности, особенно при сложных схемах валидации.
Важные особенности:
Проверка запускается после первого взаимодействия с полем и последующего изменения значения.
Логика работы:
Характерные свойства:
Этот режим часто используется как компромисс между строгой проверкой и комфортом ввода.
Комбинированный режим, при котором валидация запускается одновременно на нескольких событиях: change, blur и submit.
Поведение:
Этот режим применяется редко, поскольку приводит к значительной нагрузке на вычисления, особенно в больших формах с вложенными структурами данных.
Сам по себе YupResolver не определяет частоту вызова, однако его роль становится критичной в момент выполнения проверки.
При каждом триггере:
Таким образом, режим валидации напрямую влияет на количество запусков этой цепочки.
В зависимости от режима, resolver может вызываться:
Важно учитывать, что Yup изначально ориентирован на полную схему, и частичная валидация реализуется через внутренние механизмы фильтрации полей.
Некоторые схемы Yup включают асинхронные проверки (например, проверка уникальности имени пользователя через API). В таких случаях режим валидации влияет на частоту сетевых запросов.
Особенности:
При использовании YupResolver асинхронные ошибки обрабатываются через Promise, что делает режим валидации критичным фактором стабильности интерфейса.
Производительность напрямую зависит от:
Сравнительная характеристика:
При сложных формах режим валидации часто дополняется оптимизацией Yup-схемы:
В результате даже режим onChange может стать приемлемым при корректной архитектуре схемы.
Структура ошибок, возвращаемая resolver, зависит от момента выполнения валидации:
Это влияет на UX-логику отображения сообщений, подсветку полей и блокировку отправки формы.