React Hook Form - простая работа с формами

[@PurpleSchool]

🔗 Ссылки: React Hook Form: react-hook-form.com/ ⚡️Курс по React и Next: purpleschool.ru/course/nextjs Мои курсы по разработке: purpleschool.ru Telegram канал с полезными советами: t.me/purple_code_channel

[@react-js-next]

как здорово что есть такие авторы!

[@PurpleSchool]

Спасибо!

[@noname-nh8mx]

Не знаю в каких сложных случаях вы пользовались rhf, но на сложных кейсах уровень необходимой костыльности начинает поражать. А еще постоянно есть несколько способов сделать одно и то же, при том, что только 1 из способов работает нормально. Например хук watch экспортируемый из формы и хук useWatch. Казалось бы, одно и то же. Но нннет. Какое бы поле ты не указал в watch, компонент будет перерисован при изменении любого из полей формы. В то же время useWatch работает с перерисовками нормально. Дальше. При изменение стейта формы с состояния dirty - false, на dirty - true, опять же перерисовывается вся форма. Та же ситуация с isValid. (но только при первом изменении с isValid - true на isValid - false). Проперти внутри formState решили сделать проксями, поэтому чтобы работал ререндер завязанный на эти поля, нельзя их распаковывать. (а бывает и можно, но какую-то зависимость я так и не вывел, от раза к разу может работать, а может и нет) Догадаться об этом не прокуривая ишусы на гитхабе довольно тяжело. При этом есть хук useFormState который вроде бы работает нормально. Вопрос, зачем мне опять 2 способа сделать одно и то же, при том что один из них работает с подводными камнями? Также Controller HOC и useController хук тоже по разному работают с перерисовками. Метод {...register('fieldName')} лучше не использовать с анимациями и анмаунтами\маунтами, могут начаться непредсказуемые приколы с данными. При работе с field array, если мы хотим анимировать появление и исчезновение элементов в field array, начинаются просто невероятные пляски с бубном, потому что появляются тупо некорректные данные в хук форме. На гитхабе есть десяток ишусов с этим связанных без ответа. Просто закрытых, будто бы проблема не в rhf. Решение есть, но не тратя множество часов на прокуривание всего чего можно на гитхабе догадаться до него не легко. И в любом случае это костыль Вообщем по опыту - работать можно, но примерно 50% библиотеки работает с подводными камнями, если кейс чуть сложнее формы заполнения профиля. На разбирательство с которыми приходится тратить уйму часов, вероятно даже дней

[@ROMVN95]

Может вам лучше отправить этот лонгрид на гитхаб разработчиков? Хороший фидбек получился

[@PowWowVideo]

Согласен с нек пунктами.... Правда "watch" это не хук вовсе, это ж дилетанство :)

[@noname-nh8mx]

@@PowWowVideo да, действительно. Это что-то среднее. Оно и компонент перерисовывать умеет, и просто на изменение подписывать

[@PowWowVideo]

Но вы правы в том, что если форма чуть сложнее логина, надо сильно разбираться и т@ться днями, чтобы заработало как надо. React Final Form более проще, интуитивней и предсказуемо

[@noname-nh8mx]

​@@PowWowVideo глянул исходники, в зависимости от переданного аргумента в watch(функция или не функция) делается подписка на событие или же возвращается результат вызова _getWatch. Что конкретно делает _getWatch разбираться желания нет, но что отчетливо видно - если вызвать watch не с функцией в аргументе, будет перерисовываться все поддерево. Все еще считаете это не что-то среднее? Может оно и не вызовет ошибку если вызывать watch в ифе как в случае с обычными хуками, но оно перерисовывает компонент Также вижу что при вызове _getWatch ему всегда передается аргумент isGlobal - true, возможно вопрос с перерисовкой при изменении любого поля в этом

[@serikov4430]

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

[@PurpleSchool]

Буду иметь ввиду 👍

[@zeevnadiv8778]

спасибо тебе, хороший человек!!! Большое дело делаешь, несешь свет в массы ;-)

[@PurpleSchool]

Пожалуйста)

[@kimanowka]

Полно видео для новичков. Почему бы не сделать пару материал для middle , по той же самой архитектуре, какие-то интересные вещи в библиотеках. Такого контента вообще нет в русскоязычном ютьюбе

[@PurpleSchool]

Буду иметь ввиду.

[@Запискисамоучки]

и не говорите. Вроде и норм обзор, а вот сижу и приходится сразу лезть в доки. Тупо примера работы с сервером нет, ведь даже ошибку авторизации нужно отображать после попытки логина

[@MegaMaxxon]

Formik, yup. Интересно было бы сравнение услышать от автора.

[@PurpleSchool]

👍

[@СамирАбасов]

Стоит ли сравнивать то что обновилось месяц назад и то что обновилось 2 года назад.

[@CJIu3eHb]

​@@СамирАбасов Да и нужен ли yup, когда есть zod.

[@tezis.digital]

О, очень полезный контент! Спасибо!

[@PurpleSchool]

Пожалуйста!

[@ИванГорохов-ф8ж]

брат, на будущее Vite (French word for "quick", pronounced /vit/ , like "veet")

[@nk_77777]

Полезный контент, спасибо!)

[@PurpleSchool]

Пожалуйста!

[@Kotovar]

Как всегда - огромное спасибо (:

[@PurpleSchool]

@@Kotovar пожалуйста!

[@serikov4430]

Антон, было бы здорово посмотреть ваш новый конфиг для neovim. Шрифт, тема, добавленные плагины. Можно сделать отдельный пост и прикладывать линк к нему.

[@PurpleSchool]

Будет в следующем видео

[@wev_dev_pro]

Спасибо за видео

[@PurpleSchool]

Пожалуйста 👍

[@pizza-shlyapa]

Круто ! Только отображение клавиш пропало в второй половине видео.

[@PurpleSchool]

Да, на монтаже уже заметил

[@ruslan3040]

спасибо !

[@PurpleSchool]

Пожалуйста!

[@TheKykp]

Добрый день, Антон! А Вы можете показать как вы используете react hook form в реальных проектах, когда вам нужно сделать компонент, который будет переиспользуемый например поле input, вы создаете отдельный юай компонент, который оборачиваете Controller или как вы обычно делает? Спасибо!

[@PurpleSchool]

Controller добавляется в нужно место, сами UI компоненты его не содержать, так как не всегда могут использоваться.

[@TheKykp]

​@@PurpleSchool спасибо за Ваш ответ, а Вы не могли бы если у вас будет время, записать на эту тему видео ролик, или подсказать в каком курсе вы разбираете эти примеры, дело в том, что я сделал как вы говорите, но мне потребовалось отслеживать введен ли в инпут текст что бы изменить бекграунд, и правильно было бы сделать такое поведение внутри самого компонента инпута, что бы он видел что он полный и менял фон, однако при использовании юз хук форм, мы отдаем управление инпутом, и теперь что бы отслеживать его наполнение нужно юзать watch, сразу возникает мысль в юз эффект, добавить отслеживание изменений поля, и если длина >= 1 то меняем фон, например передавая пропс в инпут. Но как то это кажется слишком сложным. И еще у меня есть одна проблема с этой библиотекой, когда устанавливаешь ошибку кастомную, например при ответе на запрос с бека, если юзер есть - то все ок, если юзера нет, setError('user") и текст ошибки, так вот эта ошибка, при клике на сабмит формы, почему то стирается, и следующий клик на форму уже отрисовывает компонент, в котором объект errors - пустой. Как вот такие моменты контролить? Спасибо ^_^

[@кирилларистархов-ь7в]

@@TheKykp мб в состояние добавлять ошибку, и потом оттуда ее доставать и использовать в форме?(Только начал знакомиться с формами в реакт, не бейте)

[@Sa1ahaddin]

Спасибо за видео! А как ты сдела вывод ошибок в реальном времени?

[@PurpleSchool]

Это Nullls, но сейчас он не поддерживается, но есть замена none-ls

[@deGGenerate]

Лайк неглядя как всегда

[@PurpleSchool]

Спасибо!

[@ЕвгенийЯкунин-ф2д]

уже давно и с удовольствием пользуюсь библиотекой Mantine. Помимо отличного дизайна, у них есть много прекрасных хуков, в том числе и для форм. Никогда не пользовались Mantine, Антон?

[@PurpleSchool]

Нет, но будет интересно глянуть

[@parmetra]

То есть уже встроенная валидация даже?

[@dinarsharipov5022]

Чисто для продвижения

[@PurpleSchool]

Спасибо!

[@dmaberlin]

а что чаще юзают Hook Form или Formik допустим в связке с Tailwind и чисто CSS ? или надо практиковать и то и то

[@PurpleSchool]

Мне кажется зависит от команды проекта и то и то в целом подходит хорошо для работы с формами

[@СергейКорнев-э5у]

В ангуляре крутая очень валидация

[@ПалочкаВыручалочка-ц2к]

Обьясните кому не трудно, я пробовал делать обработку формы по простому без использования реакт хук форм, правильно делать как на видео сделано?

[@PurpleSchool]

Зависит от сложности формы и желания тащить библиотеки.

[@vvks9901]

я вообще не врубаюсь как форма работает

[@kostasancez2358]

Yup

[@PurpleSchool]

👍

[@arinqwerty]

спасибо🤍

[@PurpleSchool]

Пожалуйста!

[@vitmih380]

Чувак, громкость клавиш может тебе и ласкает слух. Но для видосов желательно использовать тихую клаву.

[@ПалочкаВыручалочка-ц2к]

что за редактор кода?

[@PurpleSchool]

kzbin.info/www/bejne/aoHdhIGEaZqnmaM

[@siparat842]

Что за тема и шрифт?

[@PurpleSchool]

One dark и шрифт Jerbrains Mono

[@sieghardt8191]

В новом NextJS использовать не получится уже. В 14 версии эта библа выдает ошибку, что не видит функцию useForm

[@PurpleSchool]

А компонент клиентский?

[@likluklak]

antd form

[@PurpleSchool]

К сожалению мне меньше понравились и связаны с UI либой antd. С ней норм.

[@СамирАбасов]

Складывается ошушение, что скоро не будет необходимости изучать нативный html и js. А надо будет учить библиотеки

[@PurpleSchool]

Все библиотеки строятся на основах, которые понимать все равно нужно.

[@aammssaamm]

А что там изучать? 😂

[@gals4997]

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

[@ПавловОлексій]

Автор очень хорошо рассказывает как профессионал. Даже если он не всегда говорит, как профессиональный диктор, это не повод в такой форме делать замечание. А вот сказать спасибо за доступное изложение материала можно

[@gals4997]

@@ПавловОлексій Это не замечание, а умного профессионала никакие формы не заденут, из всего извлечет пользу и разберется, что лучше сделать. Какое воздействие лучше для положительного результата никому неизвестно, вот следующие выступления и покажут. )