Надежные формы в React: Zod и React Hook Form
Формы — это основа B2B SaaS-продуктов.
Большинство разработчиков создают формы неправильно. Они используют управляемые компоненты (controlled components). Это значит, что они привязывают каждое поле ввода к хуку useState.
Это создает проблемы с производительностью.
Если в вашей форме 20 полей, ввод одного символа вызывает ререндер всей формы. Ввод имени из 10 букв приводит к 10 полным ререндерам. Из-за этого приложение начинает тормозить на слабых устройствах.
Ручная валидация — еще одна проблема. Писать операторы if для каждого поля — это грязно. Это не обеспечивает типобезопасность TypeScript.
Вам нужен способ лучше.
Используйте React Hook Form и Zod, чтобы решить эту проблему.
React Hook Form использует неуправляемые поля ввода (uncontrolled inputs) через HTML refs. Данные остаются в DOM. Форма перерисовывается только тогда, когда это необходимо, например, при появлении ошибки.
Zod отвечает за валидацию. Он определяет точную структуру ваших данных.
Вот рабочий процесс:
Определите схему Zod. Она служит вашим единым источником истины (single source of truth). Она обеспечивает как валидацию во время выполнения (runtime validation), так и типы TypeScript.
Используйте
zodResolver. Он связывает React Hook Form с вашей схемой Zod.Используйте функцию
register. Она подключает ваши поля ввода к форме, не вызывая постоянных ререндеров.
Преимущества:
- Отсутствие задержек при вводе. Большие формы работают плавно.
- Типобезопасность. Ваши данные соответствуют ожиданиям API.
- Меньше кода. Вам больше не нужно писать логику ручной валидации.
Хватит бороться с состоянием React. Используйте refs и схемы для создания профессиональных форм.
Источник: https://dev.to/iprajapatiparesh/bulletproof-react-forms-zod-react-hook-form-205j