Дима Горлов
front end/full stack javascript developer · 11.01 · ред.
Зачем вам react-hook-form?
Вы, скорее всего, используете react-hook-form или Formik вместе с React. Но так ли нужны эти библиотеки? Я уверен, что использование react-hook-form имеет смысл только если выполняются условия: - вам хватает встроенной в HTML валидации - проект не взаимодействует с API или взаимодействует исключительно через формы В таком случае вы действительно можете использовать react-hook-form на полную, потому что не придётся добавлять библиотеки для валидации (Zod, Valibot…) и получения данных (React Query, SWR…) react-hook-form предоставляет
для удобного отправления данных через формы, а также предоставляет возможность безопасно использовать валидацию формы. Если вы не знали, аттрибуты по типу required, minLength, max и т.д. можно запросто убрать через консоль разработчика. react-hook-form выполняет валидацию локально Если вы уже используете библиотеки для валидации и получения данных, они уже заменяют вам
и валидацию. Остаётся 2 полезные фичи react-hook-form, которые можно запросто сделать самому: - handleSubmit - watch Сначала добавим типы. Parsed уникален для каждой библиотеки валидации, я показываю пример с Zod. Это самая сложная часть: type Parsed = z.SafeParseSuccess | (Omit, "error"> & { error: z.typeToFlattenedError["fieldErrors"] }); type FormState = Parsed | undefined; Далее добавим простейшие функции: (Тут был код, но он ломается в сетке. Он есть тут) Я думаю даже объяснять не нужно, как эти функции работают. Вот документация для formData, Object.fromEntries(), Partial и Omit, если не знакомы. handleSubmit() тоже немного уникальна для каждой библиотеки валидации, но вам нужно просто применить валидацию к схеме Пример использования: (Тут был код, но он ломается в сетке. Он есть тут) Единственный минус - checkbox будет выдавать не то по дефолту, но это легко исправить
Дима Горлов
· 11.01
О нет, тут убираются пробелы в начале строчки
ответить
еще контент автора
еще контент автора
Дима Горлов
front end/full stack javascript developer · 11.01 · ред.
войдите, чтобы увидеть
и подписаться на интересных профи