Разделение логики и представления в React-приложении

[@victormog]

Лучший пример использования кастомных хуков, что я видел...

[@dimondmarcker3179]

спасибо за самые лучшие, бесплатные, красивые, изящные и понятные уроки в интернете! ❤

[@valeramischenko9391]

Спасибо, Михаил, классный контент, легкое доходчивое объяснение, рад что нашел ваш канал))

[@НиколайСеливанов-и2в]

Не устаю восхищаться подачей материала. Великолепно! Спасибо за труд!

[@mishanep]

Спасибо за позитив :)

[@НиколайСеливанов-и2в]

Мне как раз надо сделать фильтрацию билетов по 4 параметрам (checkbox). Это видео - то что меня спасёт :-)

[@dimahinev]

Михаил, благодарю вас ничего лучше не видел, коротко, просто, информативно, позитивно

[@adam-front]

Благодарю, топовый контент, то чего не хватает. Разделение логики React, hooks, hoc, кастомные хуки

[@irinal7766]

Классный пример на HOC и custom hooks! Нравится доходчивое объяснение, смотрю уже не первое видео. Спасибо!

[@create_your_reality_faster]

Спасибо, Михаил, пригодились и мне твои знания! Дай Бог благ земных!

[@A.Floatrx]

13:51, интересная композиция оберток... 👍

[@_oxios_]

Спасибо за урок! Было действительно полезно!

[@ggadoctb]

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

[@AlexGabber]

Отличное объяснение! Спасибо большое) С хоками теперь все понятно. Только я считаю, что они скорее не про разделение логики, их основной смысл в возможности слияния двух и более похожих, но разных компонентов. Возможно не прав, попробую понять на практике

[@kamik0t0_yt83]

Хорошее видео. Я до всего этого сам допер. И приятно что в этом видео сделано также как и у меня на своих проектах - значит ход мыслей в нужном направлении)). Помню видео было на канале по Vue где чел сказал что логика приложения и её реализация не должны пересекаться, т.е. в данном случае видно что в компоненте есть сортировка и фильтрация - логики, но их реализаций в компоненте нет и все они находится в кастомных хуках. Единственное о чем не все говорят что кастомный хук отличается от обычной функции тем что его название начинается с use (например useFilter). Если вы не напишите use то вы не сможете использовать нативные хуки внутри такой функции. Может быть это очевидно, но может кому то будет полезно... мне бы было в свое время))

[@iamcaptain7115]

Просто и наглядно. Спасибо, Михаил!

[@oleg_northern]

Вы просто лучший! Спасибо за вашу работу.

[@outcast-cr5yy]

спасибо вам большое за такой полезный контент. То что вы делаете, для нас неоценимо.

[@vladtkachenko6822]

спасибо большое, Михаил! прям идеально вовремя ютубчик подбросил это видео

[@vadimniziev5489]

Спасибо! Как всегда, очень актуальные ролики!

[@Maximurz1k]

Хорошее видео, спасибо! С Хуками пример выглядит более элегантно, Хоки я бы мб использовал как декораторы в несте: авторизация, DI, логирование, гварды и тд

[@МаксатБиримкулов-й5ц]

Спасибо , сделайте видео по интеграции платёжной системы ✊ тема очень интересная

[@mishanep]

Здесь бэкенд тогда потребуется. Напрямую с фронта слать в платежную систему запросы с секретными ключами как минимум небезопасно. Как минимум, NextJS. Я подумаю в эту сторону.

[@userJakov]

@@mishanep было бы интересно посмотреть!

[@norwinlol]

Спасибо за видео! Актуальную тему разбираете)

[@ЛюбовьЛенская-и3ц]

Спасибо! Очень доступно и интересно.

[@aleradev_s3052]

Благодарю. Полезный материал 👍

[@OsaDArT]

Отличное видео! Спасибо! Если кому интересно: есть ещё классный подход 'Контейнерные и презентационные компоненты', как собрат и конкурент НОС-у. Как по мне он более простой и читаемый.

[@aleks_nca]

Мы писали хуки когда это не было мейнстримом 😅 Только они называли хелперсами 😉 Спасибо за видео. Очень наглядно. Добавлю ссылочку в пособие для новобранцев.

[@alexidino]

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

[@sergeyfilatov3027]

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

[@mishanep]

Мы в проектах создаём много узкоспецифичных хуков, которые только в 1 компоненте и используются. Здесь вопрос их хранения. Переспользуемые в общей папке, как на видео. Узкие - в папке с компонентом (обычно 1 компонент - 1 папка, чтобы хранить там тесты, стили и прочие штуковины).

[@romanmed9035]

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

[@abereznitskiy31]

Михаил, спасибо за видео. Скажите пожалуйста, если используется redux, стоит ли выносить логику связанную с useSelectror и useDispatch в кастомные хуки для разделения? Если да, то где лучше эти хуки подключать? Там где они непосредственно требуются или в родительском компоненте и передавать значения из хука по пропсам детям?

[@mishanep]

Здравствуйте. Да, имеет смысл выносить. И в кастомные хуки подключать хуки редакса, возвращая в компонент готовые данные и методы.

[@mishanep]

Что касается места использования, то по ситуации. Если данные нужны одному дочернему компоненту, то в нем и подключать хуки. Если это десяток дочерних компонентов, нуждающихся в одной и той же логике, лучше через пропсы от родителя.

[@maxfillsen957]

Спасибо за разбор, информативно

[@mishanep]

Надеюсь хотя бы частично ответил на ваш вопрос про умные/глупые компоненты.

[@maxfillsen957]

@@mishanep да, вполне

[@DmytroYaroshenko-qk4lh]

Супер! Спасибо!

[@mikebotkin9094]

Сильно! А почему названия файлов с хуками не имеют префикса "use"? на мой взгляд удобно, когда файлы именуются так же, как и экспортируемые функции...

[@mishanep]

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

[@hohage4284]

разве нет рекомендации не использовать хук useEffect внутри hoc?

[@ГлебКодрик-ж5ж]

Спасибо огромное за информативный ролик ! Планируется ли в будущем видео по jest тестированию и React Testing Library ?

[@mishanep]

Здравствуйте. На канале уже есть видео по React testing library и видео по end 2 end тестированию с Cypress

[@ГлебКодрик-ж5ж]

@@mishanep Увидел, спасибо тебе за такой бомбезный контент

[@_justadam_]

Здравствуйте можете подсказать что за кеширования и зачем оно здесь?)

[@olnimus]

Сделайте пожалуйста про разделение логики с Apollo.

[@d_r_robot]

Спасибо!

[@olfi1728]

Спасибо.

[@dim3143]

Кстати запись типа export default withApp(App); в компонентах тоже много где запрещена, так ты привязываешь компонент к конкретному контейнеру. Теряется сам смысл использования хоков. Вместо этого используют вложения как у html тегов.

[@maxhermany]

Согласен. Но и с хуками получилось, что компонент как был с логикой, так и остался, просто теперь она вынесена в хуки. По идее, чтобы сделать чисто presentational компонент, нужно создать компонент-контейнер (хок?), который будет использовать те самые хуки и рендерить презентационный компонент, передавая ему необходимые пропсы. Тем не менее, как демонстрация различия хоков от хуков, видео годное 👌

[@MaksymTkachuk-k8j]

Хуки топ, с Хок выглядит страшнее чем было до

[@jorgenUA]

Просьба: объяснить на примерах что класть в Redux, а что нет

[@constantine6464]

как говорит наш мессия Дэн Абрамов - ничего 😂

[@SiriScare]

Михаил, уже говорил спасибо за потрясающе полезные уроки. Кажется ютуб решил удалить тот коммент. Так что еще раз повторю. Так же хочу сказать, что возникла проблема. Приведу решение для тех у кого тоже самое. Не знаю что конкретно повлияло, возможно новая версия реакта. Сделал Hoc-компонент, по примеру WithApp на 8.50 мин. Так он работал, но при попытке использовать useState выдал ошибку React Hook "useState" cannot be called inside a callback. Нашел решение Вкратце, вместо withapp(Component) { сделал withapp(Component) => { , + вместо return function (props) { сделал return function Comp(props) { . Хотел привести ссылки, но ютуб просто удаляет комментарии, возможно из-за них. Поэтому без меня найдете.

[@darkside2436]

Nice

[@denpol9956]

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

[@mishanep]

Справедливо. Как минимум, каждый хок - это дополнительный узел в виртуальном доме.

[@ssurrokk]

🕺🕺🕺

[@АлександрБерезнай-м6л]

Спасибо за видео, но зря дебаунс смешали с фильтрами - вы нарушили единую ответственность + хук фильтра ничего не говорит о задержке

[@mishanep]

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

[@АлександрБерезнай-м6л]

@@mishanep Например я подключаю ваш хук для фильтрации в свое приложение , я не могу изменить код хука и увидеть код хука . Но и задержку тоже не хочу,что делать?) Хук задержки я бы вызывал в компоненте.

[@mishanep]

@@АлександрБерезнай-м6л любое приложение старается быть консистентным, поэтому я с трудом представляю себе ситуацию, где в одной части приложения фильтр нужен с задержкой, а в другой - без. И сама задержка вероятнее всего будет всегда одинаковой, поэтому настройка и не требуется. Другой разговор, если мы пишем свою библиотеку хуков общего пользования, тогда имеет смысл поработать над гибкостью. Но это более сложная тема.

[@mico6762]

Очень жаль, что вы проиграли Магнусу в матче за шахматную корону:(

[@mishanep]

Мои коллеги по работе больше любили вспоминать вывеску моей игры против корейского гроссмейстера Нихуа.

[@Giri-16108]

"Смысла немного" - его вообще нет.

[@fiatluxinregnonoctis]

Спасибо большое