23 - Hook useEffect / React JS - Путь Самурая 2.0 (+github api)
HTML-код
- Опубликовано: 14 авг 2021
- it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
useEffect - самый важный хук. Хук для синхронизации, хук, который как и методы жизненного цикла классовых компонентов даёт нам возможность делайть сайд-эффекты прямо внутри функционального компонента. Легально))
Пример спользования useEffect из соц. сети первого сезона:
• 85 - React JS - hook, ...
Предыдущее видео про hook useState:
• 22 - Hook useState / R...
Поддержать проект монеткой: social-network.samuraijs.com
А здесь бесплатная взаимопомощь:
t.me/reactjs_samurai
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutr. .
#useEffect #хуки #практика
10:10 - It-incubator adv
11:37 - начало работы над приложением
16:15 - подсветка выбранного пользователя
22:40 - хук useEffect описание, синхронизация title
29:45 - загрузка данных с github
38:53 - реализация search поиска
46:58 - поиск, реализация через useEffect
54:16 - загрузка деталей информации о пользователе
1:02:26 - итоги первой части; почему делаем через useEffect, a не onClick
1:06:20 - начало II части, разбивка на компоненты (теория)
1:18:03 - почему важна разбивка на компоненты (оптимизация рендеринга)
1:25:25 - разбивка на компоненты (код, практика) / компонент Search
1:33:51 - реализация кнопки reset / синхронизация локального стейта (1:36:53)
1:41:03 - компонент UsersList - список пользователей
1:52:15 - компонент UserDetails - информация о пользователе
2:00:11 - реализация таймера
2:09:28 - проблема замыкания setInterval в useEffect (fix: 2:14:24)
2:16:42 - синхронизация таймера с родительской компонентой (UserDetails)
2:27:41 - сброс пользователя, когда таймер доходит до нуля
2:32:58 - проблема со сбросом таймера
2:34:40 - зачистка setInterval в useEffect (clean up функция в useEffect)
2:40:47 - проблема с несколькими useState в асинхронной операции ( axios.get(...).then(...) )
2:44:50 - сброс таймера при смене выбранного пользователя
2:50:36 - итоги, финальное отеческое слово :)
Здравствуйте. Спасибо за прекраснейшую урок.
Где можно найти код урока?
@@amazingchannel27 если что я не автор, я только таймкоды проставил🙂🙃
Димыч, требуем продолжения данного плейлиста ! Давай откроем копилку на определенную сумму и будем донатить тебе на реализацию этого дела, кто «за» чтобы продолжить изучать с димычем путь самурая 2, лайк, достучимся до учителя 😂❤️🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
я за!
Пытался вот задонатить от души за труды Димыча, хотел написать сопровождающий комментарий о том, что очень жду продолжения React JS - Путь Самурая 2.0, но форма с донатом какая-то бездушная, перевести то переведёшь, а на что конкретно собираешься проинвестировать не указать. Копилка на конкретный курс звучит очень даже хорошо! Может так будет более понятно, чего ждут подписчики от канала и это мотивирует Димыча вернуться в то, с чего всё началось ;)
Давайте будем писать под каждым новым видосом на канале: Требуем Продолжение "Путь самурая 2.0"
@@shokhaway7219 go!)
@@shokhaway7219 в точку! Давайте )
Кстаати... уже 1500 лайков и 15 000 просмотров есть. Пора бы следущий видос) Димыч ждем курс по Express и Nest, но про реакт не забывай плиз, иногда тоже закидывай сюда что-нибудь
отличное видео, спасибо тебе за то что вернулся к записи видео и к таким важным темам
Обязательно к просмотру. Давно ждал такого качественного ролика по хукам чтобы немного расширить собственное видение проблемы. Спасибо, бро! :)
Супер, столько информации да ещё и на практике. Спасибо!)
Димыч, спасибо большое за все твои уроки, за все старания, это огромная работа!
Спасибо что заставил остановиться и проделать работу самой, все получилось! Твои уроки очень помогают изучать react! Ждем новых познавательных видео
Посмотрел до конца, почти всё знал, думал, уже не будет ничего нового - и тут на тебе такая концовка! Спасибо огромное! Димыч, давай больше видео про нюансы React!
Спасибо! Отличный формат) пишешь сначала сам ,как ты сказал, а потом сидишь фиксишь)
Димыч, спасибо за твои старания! Каждый раз с нетерпением жду видос! Про React hook useEffect очень хорошо рассказал!!
React hooks useEffect
Интересные задачки, было интересно посмотреть и подумать над ними. Спасибо, Димыч!
Димыч, спасибо тебе!! Благодаря твоим курсам уже третий месяц работаю react-разрабом!! Параллельно смотрю про Hook useEffect и про всё остальноео))
Спасибо, Димыч за такое качество материала! Ты крут, мужик
Очень ждал нового урока по useEffect hook, спасибо.
Спасибо за урок 🙏🏻 useEffect , всё предельно просто и понятно !
Спасибо за Ваш труд)
Как всегда просто и понятно👍
Это настолько круто, что казалось бы курс предназначен для более осмысленных и продвинутых ребят, а ты продолжаешь так же великолепно раскладывать и доходчиво доносить информацию для всех, мега-лайк автоматом)))
Привет Мир. Просмотрел на 2.0. Интересный материал. Форма подачи отличная. Летим.
Спасибо за объяснения как именно все работает! Это мега полезно. Жаль что нет больше видео
Димыч, круто!!!! Мозги взрывает, но очень интересно и подробно объясняешь . А вот этот подход в объяснении - что откуда берется и куда попадает вообще бомба. Ждем продолжения!!!
Спасибо за видос, с последним примером это жесть, каждый раз узнаю что-то новое
Господи. это прекрасно.
Много здоровья автору и благ.
Супер супер супер! Пересмотрел несколько раз, теперь уже не так страшно смотреть на UseEffect) Давно ждал этого видео. Очень хочется еще такого же подробного разъяснения по промисам)
Будет!
Спасибо! Реально остановил и заставил сделать самому))
отдельное спасибо что разжевал что такое рефакторинг кода)
Спасибо огромное, отличный видос, очень такого не хватало.
useEffect, hooks, react
Мне кажется нужно отдельно плейлист с такими вот уроками запилить, как по мне, они более информативны и понятны. Мы сразу накинулись на сложный крупный тестовый проект и порой было ничего не понятно, а на мелких примерах все очень ясно и понятно
Вот это человечище! Такой труд больше 2 часов. Обязательно посмотрю! Чего-то нового по любому узнаю!
🚀🚀🚀 100%!
Спасибо за обратку
Спасибо, смотрю все твои видосы. Очень полезные видео
Димыч, выпуск просто улетный! Интересные нетипичные кейсы, которые запускают электроны по извилинам. Спасибо за проделанное, хотим ещё) Главное чтобы тебе это приносило удовольствие
п.с. привет из четверга инкубатора 😊
псс. с концовки знатно офигел) кто если не ты, нам вайтишникам такое покажет
Спасибо Вам , после ваших видео я наконец-то нашла то что искала ,я теперь всю жизнь в программировании буду
Огонь 🔥🚀 мчи
Фига. Почти 3 часа! Димыч, спасибо!!!
смотрите! контент на пару недель) пока выбрал темп - видео в 2 недели. Так как следующие хуки не такие масштабные и сложные. Попробую чаще публиковать видео
Дмитрий, спасибо вам большое за такой контент
Спасибо, Диман!!! Как всегда очень круто всё изложил!
Спасибо за обратную связь
лайк! повторяю за тобой, но часто опережаю тебя и делаю самостоятельно!Спасибо
Не хватает ещё про useEffect без массива зависимостей.
Видео супер!
Димыч, спасибо тебе!! Про React useEffect лучше тебя никто не рассказал!
Наконец, useEffect ! С нетерпением жду остальные хуки
Димыч, видео топ!! С первого раза туплю ) Буду пересматривать!!
Спасибо за урок, очень мощная информация!
Огонь🔥 Делал сам, получилось проще) Спасибо за видос!)
Лайк не глядя! Димыч то точно разжует за 3 часа))
Спасибо очень ждал твоего видео, сразу 👍
пожалуйста и спасибо за поддержку, мужик
Спасибо за огромную полезную работу.
Хорошая идея для использования useEffect, спасибо
Ух ёпт, почти 3 часа это мощно
Димыч спасибо! Мы очень ждем новых видео от тебя!!!
ждем продолжения Путь Самурая 2.0))) Hook useEffect, React JS
Димыч, спасибо, за видом! useEffect понят!
Огромный лайк! Крайне полезный контент
благодарю, по новому посмотрел на useEffect! )
Молодец Димыч, все очень хорошо разжевано.
бомби димыч про остальные хуки ! спасибо тебе большое)
Спасибо за курс !
Редко пишу комментарии. Но тут выше всяких похвал. Очень интересно. Спасибо
Дима, спасибо тебе, ты супер заряженный чувак. Летим.
Спасибо, спасибо Димыч. Ты делаешь огромное дело.
#React #useEffect #hooks
пожалуйста. и спасибо за обратную связь!
эти архитектурные схемки в пэинте у димыча просто супер)
Димыч, ну что ты за человек, не даешь расслабиться, только решил просмотреть и позже сделать, так ты сразу сказал, что я отношусь к числу ленивых)))ставлю на паузу и делаю рефакторинг)
Димыч как всегда крейзи, Видос сразу после стрима, настоящий крэйзи мэн!
Ура ура ура, весь день ждал))) лайк не глядя
сорри, что не успел к началу выходных!! Спасибо за лайк!
Наконец кто-то толково рассказал про React hook useEfferct
Димыч, забыл раскрыть вопрос с двумя сеттерами в useState (2:44:11). "Такой код ненадёжен", "сейчас пофилософствуем" и на этом всё)) Хотелось бы понять как правильнее это делать, чем просто поменять местами.
За видос огромное спасибо, раскрыл глаза на многие моменты!)) Ждём новые выпуски))
Спасибо за полезные видео :)
Я так рада что 2.0 продолжается!!!!!!
Спасибо за урок, Димыч!!!
супер познавательно и очень важно. спасибо!
#feedback Нравится ваше внимательность к деталям❤. У вас wrapping bug cases очень похожи with prod deployment)
Прямо бомба, Димыч сенсей! Поставил на паузу и подумал сам момент с таймером решить. Получилось так, чтобы зависимость была user, т.е. запускать useEffect по новой, как новый selectedUser придет в UserDetails, и сетать секунды в 60; но, тут таймер начинает накладываться друг на друга. Сразу же вспомнил про cleanup функцию useEffect'a и заclear'ил интервал предварительно создав переменную timer и присвоив ей setInterval, и эту переменную передал в clearInterval:
useEffect(() => {
if(props.user) {
setSeconds(60)
}
let timer = setInterval(() => {
setSeconds((prevValue) => prevValue - 1)
}, 1000)
return () => {
clearInterval(timer)
}
}, [])
Дальше конечно так уже не работало бы. Классно, каждый раз что-то новое с ваших уроков! Так вот и посмотрел все выпуски, набрался неплохо! Буду бомбить дальше и лететь в космос! Спасибо!
Димыч, спасибо за подробное объяснение.
PS: в cледующем видосе, на превьюхе (там где песня - Самурай) внизу пусти аккорды,
буду исполнять когда настроение падает:))))))))))))))))))))
Огромное спасибо Мастер, очень интересно все )
🚀🔥 пожалуйста! Летим дальше!
Дімич красава як завжди💪
спасибо, Димыч. Лайкос не глядя
Димыч, спасибо! Летим!
react hooks хуки реакт useEffect
Кейс с перестановкой hooks вынос мозга. Узнал много нового.
Ай Димыч - красавчег. Респект за контент и глубину.
спасибо за фидбек!!!
Спасибо за useEffect!
Димыч, спасибо за видос!)
ооооооооооо новый выпуск! за это время пока я ждал, пересмотрел первую часть, выучил TS и нашел работу ) но я все равно посмотрю)
Поздравляю с трудоустройством
@@ITKAMASUTRA спасибо Димыч, ты к этому тоже причастен )
Годнота, как всегда)
3 часа, жесть.. Димыч красавичк!
:)) летим-летим! useEffect - сложная штука
Хотел первым оставить комментарий, да как тут успеешь )))
Спасибо за очередное видео! :)
спасибо за поддержку!! И пожалуйста! useEffect - тяжкая тема!
Уже давно устроился на работу, но поддержу видео комментарием) Большое дело делаешь
спасиб. Интересно будет твоё мнение (если посомтришь видос), со своим опытом, узнали ли что-то новое!
@@ITKAMASUTRA я на шарпе под десктоп делаю в основном, по вебу очень мало задач дают, поэтому для меня все новое)) Все эти вещи смотрю больше из интереса, просто чтобы быть в теме)) Фидбек дам как осилю)
Спасибо, Димыч. Просмотрел на скорости 2.0.
Хотелось бы контент пожёстче.
Гоу уроки по бэкенду (NestJs например)!
Летим вперёд!!!
Так жёстко это лучшее видео про useEffect, это бомба! Запиши плис про эвентлуп так же понятно
да-да-да!! в ближайшее время! потому что обещал миллион лет уже как
Спасибо, круто, только можно было бы ещё про useLayoutEffect рассказать и в чем отличия)
Ура! Ждём ещё хуки
Спасибо большое за Путь Самурая по react! Очень подробно и круто!
Благодаря нему я два года назад начала работать и бомблю дальше!)
🚀🚀🚀
Димыч, как всегда респект тебе за знания, которые вкладываешь в наши головы! Я реализовала самостоятельно сёрчи в нашей самурайской соцсети через хуки, но после твоего урока зарефакторила код, и он стал более читабельным, простым. Перенесла в юз эффекты все зависимости из онкликов и онченджев)) Спасибо, учитель!!! #React #useEffect #hooks
🚀🚀🚀
Большое спасибо, очень хороший урок. Очень прилично подтянул скилл, устроился на работу. Спасибо. Как более ни менее с финансами дела станут получше что-то отправлю. А вот на hh судя по всему сейчас очень трудно устроиться. Видимо времена такие.
А как тогда устроился?
@@__kawaii через hh))
Требуем продолжения Пути Самурая...
Заставка просто огонь
С таким бесплатным контентом скоро все инфоцынане остануться без работы
🚀🚀🚀
Наконец-то я поняла hook useEffect React
Спасибо, Димыч!
Hook useEffect / React JS / github api / useState
IT-KAMASUTRA
IT-INCUBATOR
Dimych best of the best!!!
Дима, вот смотрела твой видос - он просто отличный по подробности, параллельно читала документацию реакт: нашла ошибки - правда, я не знаю, может такое допустимо, но по феншую, то есть по документации синхронизировать можно и нужно только с чем-то внешним по отношению к реакту: броузерное API, сервер, не-реакт модули, легаси какое-нибудь. А ты как раз чем дальше писал приложение, тем чаще синхронизировал пропсы друг с другом. Так делать не рекомендуют, поскольку это приводит к зацикливанию. Я вот вспомнила, что читала там же в документации про useState, и про наличие, отсутствие компонента - так вот: компонент демонтируется, если его нет в DOM, а там он может быть заменен на другой компонент (это я касательно сброса счетчика при замене юзера с одного на другого) если из родителя в переиспользуемый компонент userDetails будет передан key. мне вот после прочтения док очень мозолило глаз, что ты синхронизируешься с пропсами, сделала с key и - вуаля - счетчик, как child сбрасывается сам собой. Не претендую на абсолютную правоту - мой маленький рефакторинг, который, может, кому-нибудь поможет. Спецификация - отличная вещь! :) Димыч - замечательный учитель!
очень понравился урок
Супер, спасибо!
просматриваю на скорости 1.25, в целом запоминаю новые фичи и повторяю хуки, не переписывая код, так как подобная работа у меня уже есть, с таким же рефакторингом
Сегодня как раз бил голову над этим useEffect. Надеюсь видос поможет)
тема сложная. Надеюсь станет легче и понятнее хук useEffect