🔗 Ссылки: React Hook Form: react-hook-form.com/ ⚡️Курс по React и Next: purpleschool.ru/course/nextjs Мои курсы по разработке: purpleschool.ru Telegram канал с полезными советами: t.me/purple_code_channel
Было бы здорово ещё залезть внутрь и разобрать как самому можно сделать мини-библиотеку для работы на проекте, для того чтобы лучше понимать как это работает. Можно прям отдельным курсом по работе с формами.
Не знаю в каких сложных случаях вы пользовались 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% библиотеки работает с подводными камнями, если кейс чуть сложнее формы заполнения профиля. На разбирательство с которыми приходится тратить уйму часов, вероятно даже дней
Но вы правы в том, что если форма чуть сложнее логина, надо сильно разбираться и т@ться днями, чтобы заработало как надо. React Final Form более проще, интуитивней и предсказуемо
@@PowWowVideo глянул исходники, в зависимости от переданного аргумента в watch(функция или не функция) делается подписка на событие или же возвращается результат вызова _getWatch. Что конкретно делает _getWatch разбираться желания нет, но что отчетливо видно - если вызвать watch не с функцией в аргументе, будет перерисовываться все поддерево. Все еще считаете это не что-то среднее? Может оно и не вызовет ошибку если вызывать watch в ифе как в случае с обычными хуками, но оно перерисовывает компонент Также вижу что при вызове _getWatch ему всегда передается аргумент isGlobal - true, возможно вопрос с перерисовкой при изменении любого поля в этом
Полно видео для новичков. Почему бы не сделать пару материал для middle , по той же самой архитектуре, какие-то интересные вещи в библиотеках. Такого контента вообще нет в русскоязычном ютьюбе
и не говорите. Вроде и норм обзор, а вот сижу и приходится сразу лезть в доки. Тупо примера работы с сервером нет, ведь даже ошибку авторизации нужно отображать после попытки логина
Антон, было бы здорово посмотреть ваш новый конфиг для neovim. Шрифт, тема, добавленные плагины. Можно сделать отдельный пост и прикладывать линк к нему.
Добрый день, Антон! А Вы можете показать как вы используете react hook form в реальных проектах, когда вам нужно сделать компонент, который будет переиспользуемый например поле input, вы создаете отдельный юай компонент, который оборачиваете Controller или как вы обычно делает? Спасибо!
@@PurpleSchool спасибо за Ваш ответ, а Вы не могли бы если у вас будет время, записать на эту тему видео ролик, или подсказать в каком курсе вы разбираете эти примеры, дело в том, что я сделал как вы говорите, но мне потребовалось отслеживать введен ли в инпут текст что бы изменить бекграунд, и правильно было бы сделать такое поведение внутри самого компонента инпута, что бы он видел что он полный и менял фон, однако при использовании юз хук форм, мы отдаем управление инпутом, и теперь что бы отслеживать его наполнение нужно юзать watch, сразу возникает мысль в юз эффект, добавить отслеживание изменений поля, и если длина >= 1 то меняем фон, например передавая пропс в инпут. Но как то это кажется слишком сложным. И еще у меня есть одна проблема с этой библиотекой, когда устанавливаешь ошибку кастомную, например при ответе на запрос с бека, если юзер есть - то все ок, если юзера нет, setError('user") и текст ошибки, так вот эта ошибка, при клике на сабмит формы, почему то стирается, и следующий клик на форму уже отрисовывает компонент, в котором объект errors - пустой. Как вот такие моменты контролить? Спасибо ^_^
уже давно и с удовольствием пользуюсь библиотекой Mantine. Помимо отличного дизайна, у них есть много прекрасных хуков, в том числе и для форм. Никогда не пользовались Mantine, Антон?
Даже если не слышать вашу речь, по движению мышц лица можно понять, что у вас неверное звукоизвлечение речевого аппарата. При произношении растягиваете рот в стороны(как при улыбке с сжатыми губами), не раскрываете горловое кольцо и гласные проглатываете, сворачиваете в конце не только фразы, но даже слова, сложно слушать. Могли бы несколькими упражнениями исправить эту кашу.
Автор очень хорошо рассказывает как профессионал. Даже если он не всегда говорит, как профессиональный диктор, это не повод в такой форме делать замечание. А вот сказать спасибо за доступное изложение материала можно
@@ПавловОлексій Это не замечание, а умного профессионала никакие формы не заденут, из всего извлечет пользу и разберется, что лучше сделать. Какое воздействие лучше для положительного результата никому неизвестно, вот следующие выступления и покажут. )
🔗 Ссылки:
React Hook Form: react-hook-form.com/
⚡️Курс по React и Next: purpleschool.ru/course/nextjs
Мои курсы по разработке: purpleschool.ru
Telegram канал с полезными советами: t.me/purple_code_channel
как здорово что есть такие авторы!
Спасибо!
спасибо тебе, хороший человек!!! Большое дело делаешь, несешь свет в массы ;-)
Пожалуйста)
Было бы здорово ещё залезть внутрь и разобрать как самому можно сделать мини-библиотеку для работы на проекте, для того чтобы лучше понимать как это работает.
Можно прям отдельным курсом по работе с формами.
Буду иметь ввиду 👍
Formik, yup. Интересно было бы сравнение услышать от автора.
👍
Стоит ли сравнивать то что обновилось месяц назад и то что обновилось 2 года назад.
@@СамирАбасов Да и нужен ли yup, когда есть zod.
О, очень полезный контент! Спасибо!
Пожалуйста!
Не знаю в каких сложных случаях вы пользовались 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% библиотеки работает с подводными камнями, если кейс чуть сложнее формы заполнения профиля. На разбирательство с которыми приходится тратить уйму часов, вероятно даже дней
Может вам лучше отправить этот лонгрид на гитхаб разработчиков? Хороший фидбек получился
Согласен с нек пунктами....
Правда "watch" это не хук вовсе, это ж дилетанство :)
@@PowWowVideo да, действительно. Это что-то среднее. Оно и компонент перерисовывать умеет, и просто на изменение подписывать
Но вы правы в том, что если форма чуть сложнее логина, надо сильно разбираться и т@ться днями, чтобы заработало как надо.
React Final Form более проще, интуитивней и предсказуемо
@@PowWowVideo глянул исходники, в зависимости от переданного аргумента в watch(функция или не функция) делается подписка на событие или же возвращается результат вызова _getWatch. Что конкретно делает _getWatch разбираться желания нет, но что отчетливо видно - если вызвать watch не с функцией в аргументе, будет перерисовываться все поддерево. Все еще считаете это не что-то среднее? Может оно и не вызовет ошибку если вызывать watch в ифе как в случае с обычными хуками, но оно перерисовывает компонент
Также вижу что при вызове _getWatch ему всегда передается аргумент isGlobal - true, возможно вопрос с перерисовкой при изменении любого поля в этом
Как всегда - огромное спасибо (:
@@Kotovar пожалуйста!
Полезный контент, спасибо!)
Пожалуйста!
брат, на будущее Vite (French word for "quick", pronounced /vit/ , like "veet")
Полно видео для новичков. Почему бы не сделать пару материал для middle , по той же самой архитектуре, какие-то интересные вещи в библиотеках. Такого контента вообще нет в русскоязычном ютьюбе
Буду иметь ввиду.
и не говорите. Вроде и норм обзор, а вот сижу и приходится сразу лезть в доки. Тупо примера работы с сервером нет, ведь даже ошибку авторизации нужно отображать после попытки логина
Спасибо за видео
Пожалуйста 👍
спасибо !
Пожалуйста!
Лайк неглядя как всегда
Спасибо!
Чисто для продвижения
Спасибо!
Антон, было бы здорово посмотреть ваш новый конфиг для neovim. Шрифт, тема, добавленные плагины. Можно сделать отдельный пост и прикладывать линк к нему.
Будет в следующем видео
Добрый день, Антон! А Вы можете показать как вы используете react hook form в реальных проектах, когда вам нужно сделать компонент, который будет переиспользуемый например поле input, вы создаете отдельный юай компонент, который оборачиваете Controller или как вы обычно делает? Спасибо!
Controller добавляется в нужно место, сами UI компоненты его не содержать, так как не всегда могут использоваться.
@@PurpleSchool спасибо за Ваш ответ, а Вы не могли бы если у вас будет время, записать на эту тему видео ролик, или подсказать в каком курсе вы разбираете эти примеры, дело в том, что я сделал как вы говорите, но мне потребовалось отслеживать введен ли в инпут текст что бы изменить бекграунд, и правильно было бы сделать такое поведение внутри самого компонента инпута, что бы он видел что он полный и менял фон, однако при использовании юз хук форм, мы отдаем управление инпутом, и теперь что бы отслеживать его наполнение нужно юзать watch, сразу возникает мысль в юз эффект, добавить отслеживание изменений поля, и если длина >= 1 то меняем фон, например передавая пропс в инпут. Но как то это кажется слишком сложным. И еще у меня есть одна проблема с этой библиотекой, когда устанавливаешь ошибку кастомную, например при ответе на запрос с бека, если юзер есть - то все ок, если юзера нет, setError('user") и текст ошибки, так вот эта ошибка, при клике на сабмит формы, почему то стирается, и следующий клик на форму уже отрисовывает компонент, в котором объект errors - пустой. Как вот такие моменты контролить? Спасибо ^_^
@@TheKykp мб в состояние добавлять ошибку, и потом оттуда ее доставать и использовать в форме?(Только начал знакомиться с формами в реакт, не бейте)
Круто ! Только отображение клавиш пропало в второй половине видео.
Да, на монтаже уже заметил
В ангуляре крутая очень валидация
Спасибо за видео!
А как ты сдела вывод ошибок в реальном времени?
Это Nullls, но сейчас он не поддерживается, но есть замена none-ls
уже давно и с удовольствием пользуюсь библиотекой Mantine. Помимо отличного дизайна, у них есть много прекрасных хуков, в том числе и для форм. Никогда не пользовались Mantine, Антон?
Нет, но будет интересно глянуть
То есть уже встроенная валидация даже?
а что чаще юзают Hook Form или Formik допустим в связке с Tailwind и чисто CSS ? или надо практиковать и то и то
Мне кажется зависит от команды проекта и то и то в целом подходит хорошо для работы с формами
Обьясните кому не трудно, я пробовал делать обработку формы по простому без использования реакт хук форм, правильно делать как на видео сделано?
Зависит от сложности формы и желания тащить библиотеки.
Yup
👍
я вообще не врубаюсь как форма работает
Что за тема и шрифт?
One dark и шрифт Jerbrains Mono
что за редактор кода?
ruclips.net/video/4PzSNN45tcA/видео.html
В новом NextJS использовать не получится уже. В 14 версии эта библа выдает ошибку, что не видит функцию useForm
А компонент клиентский?
спасибо🤍
Пожалуйста!
Чувак, громкость клавиш может тебе и ласкает слух. Но для видосов желательно использовать тихую клаву.
Складывается ошушение, что скоро не будет необходимости изучать нативный html и js. А надо будет учить библиотеки
Все библиотеки строятся на основах, которые понимать все равно нужно.
А что там изучать? 😂
antd form
К сожалению мне меньше понравились и связаны с UI либой antd. С ней норм.
Даже если не слышать вашу речь, по движению мышц лица можно понять, что у вас неверное звукоизвлечение речевого аппарата. При произношении растягиваете рот в стороны(как при улыбке с сжатыми губами), не раскрываете горловое кольцо и гласные проглатываете, сворачиваете в конце не только фразы, но даже слова, сложно слушать. Могли бы несколькими упражнениями исправить эту кашу.
Автор очень хорошо рассказывает как профессионал. Даже если он не всегда говорит, как профессиональный диктор, это не повод в такой форме делать замечание. А вот сказать спасибо за доступное изложение материала можно
@@ПавловОлексій Это не замечание, а умного профессионала никакие формы не заденут, из всего извлечет пользу и разберется, что лучше сделать. Какое воздействие лучше для положительного результата никому неизвестно, вот следующие выступления и покажут. )