alexkomarchev Apr 19 at 11:15

Год с React Hook Form и Zod: меньше кода, но не без нюансов

Medium

4 min

6.1K

ReactJS * TypeScript * JavaScript * React Native *

From sandbox

Comments 5

Ksen077 Apr 19 at 18:35

Спасибо, что подсветили такие тонкие моменты, тоже хотим перейти на RHF в своем проекте.

McHack Apr 20 at 08:39

Советую посмотреть в сторону Tanstack Form, он Typescript First в отличии от RHF, да и свободы явно больше и вроде как нет проблем с React Compiler. Я ниже оставил коммент почему считаю Tanstack Form более перспективным вариантом

CzarOfScripts Apr 20 at 00:54

Читая такие статьи о зоде, понимаешь, что человек скорее всего первый раз на простеньком примере попробовал его и все, а потом вылазит кучу тонкостей. Например тот самый infer который используют все, но мало кто знает про input/output, из-за чего в резолвере для формика вылазят ошибки, когда передаешь одни значения, но схема на выходе выдает далеко не принимаемые типы и ты ловишь кучу ошибок и не понимаешь в чем дело, в зоде? В формике или еще чем-то?

McHack Apr 20 at 08:37

Мы прям намучились с RHF при создании сложных и динамических форм. У нас были и массивы с полями, которые по кнопкам нужно добавлять и убирать. Нужен был просчет общего статуса опр куска формы и тут прям не было очевидного решения. Ну и это помимо проблем с типами.

Практически с каждым перечисленным выше аспектом возникали трудности или проблемы. Все сделалось и решилось, но производительность оставляет желать лучшего (в том числе и из за не самой лучшей реализации на нашей стороне).

Сейчас нам снова стоит делать большую и сложную форму, но не смотря на использование RHF уже давно по всему проекту я в серьёз поглядываю на Tanstack Form. Выглядит он интереснее как раз для сложных форм, т.к. это headless либа для создания форм. Даёт всю базу в виде валидации и прочей истории, но при этом есть очень нужные инструменты в виде подписок прям в JSX-е (нет лишних ререндеров, т.к. отслеживание идёт на уровне вызова компонента подписки, а не на уровне хост компонента).

winkyBrain Apr 24 at 02:28

Мы прям намучились с RHF при создании сложных и динамических форм. У нас были и массивы с полями, которые по кнопкам нужно добавлять и убирать. Нужен был просчет общего статуса опр куска формы и тут прям не было очевидного решения

useFieldArray + Controller с useWatch для компонента, который будет считать общий статус куска формы решают подобные вопросы, как с просчёт статуса любого куска формы, так и изолированные рендеры. Вам что-то из вышеперечисленного не помогло или скорее незнание инструментов стало проблемой?