Как строить сложные формы на React Hook Form со схемой Zod?
- Зачем нужен React Hook Form?
React Hook Form держит поля неконтролируемыми (через register и ref) — мало перерисовок даже на больших формах — и даёт состояние ошибок, отправки, «грязных» полей. Zod описывает схему данных: типы, обязательность, форматы, связи полей; через zodResolver она становится валидацией формы, а z.infer даёт тип данных для TypeScript. Ошибки показывают рядом с полем и связывают через aria-invalid и aria-describedby; ту же схему можно проверять на сервере.
- Controller — для сторонних контролируемых компонентов (селекты, датапикеры)
- mode: "onBlur" или "onSubmit" — когда валидировать
- Серверные ошибки — setError на конкретное поле
А ещё Одна схема Zod на клиенте и сервере — меньше расхождений
Подробно
const schema = z.object({ email: z.string().email("Неверный email"), age: z.coerce.number().min(18) });
type Form = z.infer<typeof schema>;
const { register, handleSubmit, formState: { errors } } = useForm<Form>({ resolver: zodResolver(schema) });
<input {...register("email")} aria-invalid={!!errors.email} aria-describedby="email-err" />
{errors.email && <p id="email-err">{errors.email.message}</p>}Что хотят услышать
- Неконтролируемые поля и мало перерисовок.
- Схема Zod, resolver, вывод типа.
- Доступные ошибки.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗React Hook Form делает все поля контролируемыми и перерисовывает форму на каждый символ
- ✓RHF держит поля неконтролируемыми, схема Zod через zodResolver даёт валидацию и тип
- ✗Zod описывает только стили и подписи полей формы, а валидацию пишут вручную в onChange
- ✗Схему Zod нельзя переиспользовать на сервере, поэтому серверную проверку пишут заново вручную
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.