🔗 Ссылки: 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. Шрифт, тема, добавленные плагины. Можно сделать отдельный пост и прикладывать линк к нему.
уже давно и с удовольствием пользуюсь библиотекой Mantine. Помимо отличного дизайна, у них есть много прекрасных хуков, в том числе и для форм. Никогда не пользовались Mantine, Антон?
Добрый день, Антон! А Вы можете показать как вы используете react hook form в реальных проектах, когда вам нужно сделать компонент, который будет переиспользуемый например поле input, вы создаете отдельный юай компонент, который оборачиваете Controller или как вы обычно делает? Спасибо!
@@PurpleSchool спасибо за Ваш ответ, а Вы не могли бы если у вас будет время, записать на эту тему видео ролик, или подсказать в каком курсе вы разбираете эти примеры, дело в том, что я сделал как вы говорите, но мне потребовалось отслеживать введен ли в инпут текст что бы изменить бекграунд, и правильно было бы сделать такое поведение внутри самого компонента инпута, что бы он видел что он полный и менял фон, однако при использовании юз хук форм, мы отдаем управление инпутом, и теперь что бы отслеживать его наполнение нужно юзать watch, сразу возникает мысль в юз эффект, добавить отслеживание изменений поля, и если длина >= 1 то меняем фон, например передавая пропс в инпут. Но как то это кажется слишком сложным. И еще у меня есть одна проблема с этой библиотекой, когда устанавливаешь ошибку кастомную, например при ответе на запрос с бека, если юзер есть - то все ок, если юзера нет, setError('user") и текст ошибки, так вот эта ошибка, при клике на сабмит формы, почему то стирается, и следующий клик на форму уже отрисовывает компонент, в котором объект errors - пустой. Как вот такие моменты контролить? Спасибо ^_^
Даже если не слышать вашу речь, по движению мышц лица можно понять, что у вас неверное звукоизвлечение речевого аппарата. При произношении растягиваете рот в стороны(как при улыбке с сжатыми губами), не раскрываете горловое кольцо и гласные проглатываете, сворачиваете в конце не только фразы, но даже слова, сложно слушать. Могли бы несколькими упражнениями исправить эту кашу.
Автор очень хорошо рассказывает как профессионал. Даже если он не всегда говорит, как профессиональный диктор, это не повод в такой форме делать замечание. А вот сказать спасибо за доступное изложение материала можно
@@user-yk6iq5hn4d Это не замечание, а умного профессионала никакие формы не заденут, из всего извлечет пользу и разберется, что лучше сделать. Какое воздействие лучше для положительного результата никому неизвестно, вот следующие выступления и покажут. )
![[กูเพิ่งซื้อมึงปิดหนี] 20 นาที ผมรีวิวเกมที่แย่ที่สุดในโลก CONCORD](http://i.ytimg.com/vi/XhC-3q3Ii7I/mqdefault.jpg)
🔗 Ссылки:
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% библиотеки работает с подводными камнями, если кейс чуть сложнее формы заполнения профиля. На разбирательство с которыми приходится тратить уйму часов, вероятно даже дней
Может вам лучше отправить этот лонгрид на гитхаб разработчиков? Хороший фидбек получился
Согласен с нек пунктами....
Правда "watch" это не хук вовсе, это ж дилетанство :)
@@PowWowVideo да, действительно. Это что-то среднее. Оно и компонент перерисовывать умеет, и просто на изменение подписывать
Но вы правы в том, что если форма чуть сложнее логина, надо сильно разбираться и т@ться днями, чтобы заработало как надо.
React Final Form более проще, интуитивней и предсказуемо
@@PowWowVideo глянул исходники, в зависимости от переданного аргумента в watch(функция или не функция) делается подписка на событие или же возвращается результат вызова _getWatch. Что конкретно делает _getWatch разбираться желания нет, но что отчетливо видно - если вызвать watch не с функцией в аргументе, будет перерисовываться все поддерево. Все еще считаете это не что-то среднее? Может оно и не вызовет ошибку если вызывать watch в ифе как в случае с обычными хуками, но оно перерисовывает компонент
Также вижу что при вызове _getWatch ему всегда передается аргумент isGlobal - true, возможно вопрос с перерисовкой при изменении любого поля в этом
Formik, yup. Интересно было бы сравнение услышать от автора.
👍
Стоит ли сравнивать то что обновилось месяц назад и то что обновилось 2 года назад.
@@user-zi4gy8nk6d Да и нужен ли yup, когда есть zod.
Полно видео для новичков. Почему бы не сделать пару материал для middle , по той же самой архитектуре, какие-то интересные вещи в библиотеках. Такого контента вообще нет в русскоязычном ютьюбе
Буду иметь ввиду.
и не говорите. Вроде и норм обзор, а вот сижу и приходится сразу лезть в доки. Тупо примера работы с сервером нет, ведь даже ошибку авторизации нужно отображать после попытки логина
брат, на будущее Vite (French word for "quick", pronounced /vit/ , like "veet")
О, очень полезный контент! Спасибо!
Пожалуйста!
Как всегда - огромное спасибо (:
@@Kotovar пожалуйста!
Полезный контент, спасибо!)
Пожалуйста!
Антон, было бы здорово посмотреть ваш новый конфиг для neovim. Шрифт, тема, добавленные плагины. Можно сделать отдельный пост и прикладывать линк к нему.
Будет в следующем видео
Спасибо за видео!
А как ты сдела вывод ошибок в реальном времени?
Это Nullls, но сейчас он не поддерживается, но есть замена none-ls
Спасибо за видео
Пожалуйста 👍
спасибо !
Пожалуйста!
Круто ! Только отображение клавиш пропало в второй половине видео.
Да, на монтаже уже заметил
Лайк неглядя как всегда
Спасибо!
Чисто для продвижения
Спасибо!
уже давно и с удовольствием пользуюсь библиотекой Mantine. Помимо отличного дизайна, у них есть много прекрасных хуков, в том числе и для форм. Никогда не пользовались Mantine, Антон?
Нет, но будет интересно глянуть
То есть уже встроенная валидация даже?
а что чаще юзают Hook Form или Formik допустим в связке с Tailwind и чисто CSS ? или надо практиковать и то и то
Мне кажется зависит от команды проекта и то и то в целом подходит хорошо для работы с формами
Добрый день, Антон! А Вы можете показать как вы используете react hook form в реальных проектах, когда вам нужно сделать компонент, который будет переиспользуемый например поле input, вы создаете отдельный юай компонент, который оборачиваете Controller или как вы обычно делает? Спасибо!
Controller добавляется в нужно место, сами UI компоненты его не содержать, так как не всегда могут использоваться.
@@PurpleSchool спасибо за Ваш ответ, а Вы не могли бы если у вас будет время, записать на эту тему видео ролик, или подсказать в каком курсе вы разбираете эти примеры, дело в том, что я сделал как вы говорите, но мне потребовалось отслеживать введен ли в инпут текст что бы изменить бекграунд, и правильно было бы сделать такое поведение внутри самого компонента инпута, что бы он видел что он полный и менял фон, однако при использовании юз хук форм, мы отдаем управление инпутом, и теперь что бы отслеживать его наполнение нужно юзать watch, сразу возникает мысль в юз эффект, добавить отслеживание изменений поля, и если длина >= 1 то меняем фон, например передавая пропс в инпут. Но как то это кажется слишком сложным. И еще у меня есть одна проблема с этой библиотекой, когда устанавливаешь ошибку кастомную, например при ответе на запрос с бека, если юзер есть - то все ок, если юзера нет, setError('user") и текст ошибки, так вот эта ошибка, при клике на сабмит формы, почему то стирается, и следующий клик на форму уже отрисовывает компонент, в котором объект errors - пустой. Как вот такие моменты контролить? Спасибо ^_^
@@TheKykp мб в состояние добавлять ошибку, и потом оттуда ее доставать и использовать в форме?(Только начал знакомиться с формами в реакт, не бейте)
Обьясните кому не трудно, я пробовал делать обработку формы по простому без использования реакт хук форм, правильно делать как на видео сделано?
Зависит от сложности формы и желания тащить библиотеки.
В ангуляре крутая очень валидация
Yup
👍
я вообще не врубаюсь как форма работает
Чувак, громкость клавиш может тебе и ласкает слух. Но для видосов желательно использовать тихую клаву.
что за редактор кода?
th-cam.com/video/4PzSNN45tcA/w-d-xo.html
В новом NextJS использовать не получится уже. В 14 версии эта библа выдает ошибку, что не видит функцию useForm
А компонент клиентский?
Что за тема и шрифт?
One dark и шрифт Jerbrains Mono
спасибо🤍
Пожалуйста!
Складывается ошушение, что скоро не будет необходимости изучать нативный html и js. А надо будет учить библиотеки
Все библиотеки строятся на основах, которые понимать все равно нужно.
А что там изучать? 😂
antd form
К сожалению мне меньше понравились и связаны с UI либой antd. С ней норм.
Даже если не слышать вашу речь, по движению мышц лица можно понять, что у вас неверное звукоизвлечение речевого аппарата. При произношении растягиваете рот в стороны(как при улыбке с сжатыми губами), не раскрываете горловое кольцо и гласные проглатываете, сворачиваете в конце не только фразы, но даже слова, сложно слушать. Могли бы несколькими упражнениями исправить эту кашу.
Автор очень хорошо рассказывает как профессионал. Даже если он не всегда говорит, как профессиональный диктор, это не повод в такой форме делать замечание. А вот сказать спасибо за доступное изложение материала можно
@@user-yk6iq5hn4d Это не замечание, а умного профессионала никакие формы не заденут, из всего извлечет пользу и разберется, что лучше сделать. Какое воздействие лучше для положительного результата никому неизвестно, вот следующие выступления и покажут. )