23 - Hook useEffect / React JS - Путь Самурая 2.0 (+github api)

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 #хуки #практика

[@user-tf6jz7hj9d]

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]

Здравствуйте. Спасибо за прекраснейшую урок. Где можно найти код урока?

[@user-tf6jz7hj9d]

@@amazingchannel27 если что я не автор, я только таймкоды проставил🙂🙃

[@johnconnor9787]

Кстаати... уже 1500 лайков и 15 000 просмотров есть. Пора бы следущий видос) Димыч ждем курс по Express и Nest, но про реакт не забывай плиз, иногда тоже закидывай сюда что-нибудь

[@oconnor4417]

Димыч, требуем продолжения данного плейлиста ! Давай откроем копилку на определенную сумму и будем донатить тебе на реализацию этого дела, кто «за» чтобы продолжить изучать с димычем путь самурая 2, лайк, достучимся до учителя 😂❤️🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

[@crypto4elik]

я за!

[@dearcatliska4147]

Пытался вот задонатить от души за труды Димыча, хотел написать сопровождающий комментарий о том, что очень жду продолжения React JS - Путь Самурая 2.0, но форма с донатом какая-то бездушная, перевести то переведёшь, а на что конкретно собираешься проинвестировать не указать. Копилка на конкретный курс звучит очень даже хорошо! Может так будет более понятно, чего ждут подписчики от канала и это мотивирует Димыча вернуться в то, с чего всё началось ;)

[@shokhaway7219]

Давайте будем писать под каждым новым видосом на канале: Требуем Продолжение "Путь самурая 2.0"

[@crypto4elik]

@@shokhaway7219 go!)

[@oconnor4417]

@@shokhaway7219 в точку! Давайте )

[@UnrealTabby]

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

[@user-kj9mm2gc3r]

Спасибо что заставил остановиться и проделать работу самой, все получилось! Твои уроки очень помогают изучать react! Ждем новых познавательных видео

[@lostsouls3151]

Супер, столько информации да ещё и на практике. Спасибо!)

[@bohdanartiukhov3572]

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

[@user-rg8wz2rt9e]

Вот это человечище! Такой труд больше 2 часов. Обязательно посмотрю! Чего-то нового по любому узнаю!

[@ITKAMASUTRA]

🚀🚀🚀 100%! Спасибо за обратку

[@user-jw1iw5ie5z]

Димыч, спасибо тебе!! Благодаря твоим курсам уже третий месяц работаю react-разрабом!! Параллельно смотрю про Hook useEffect и про всё остальноео))

[@user-wj6ue7nt5g]

Супер супер супер! Пересмотрел несколько раз, теперь уже не так страшно смотреть на UseEffect) Давно ждал этого видео. Очень хочется еще такого же подробного разъяснения по промисам)

[@ITKAMASUTRA]

Будет!

[@coldtouch9099]

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

[@olegdegterov1595]

Очень ждал нового урока по useEffect hook, спасибо.

[@kostiantynkolomiiets6077]

Димыч, спасибо большое за все твои уроки, за все старания, это огромная работа!

[@andriilukianenko8106]

Посмотрел до конца, почти всё знал, думал, уже не будет ничего нового - и тут на тебе такая концовка! Спасибо огромное! Димыч, давай больше видео про нюансы React!

[@user-wc2qn5xn2w]

Спасибо! Отличный формат) пишешь сначала сам ,как ты сказал, а потом сидишь фиксишь)

[@darkside2436]

С таким бесплатным контентом скоро все инфоцынане остануться без работы

[@ITKAMASUTRA]

🚀🚀🚀

[@user-mh7lu6gv6f]

Спасибо за объяснения как именно все работает! Это мега полезно. Жаль что нет больше видео

[@dimalugovsky1415]

Спасибо за Ваш труд) Как всегда просто и понятно👍

[@Expertdog]

Димыч, круто!!!! Мозги взрывает, но очень интересно и подробно объясняешь . А вот этот подход в объяснении - что откуда берется и куда попадает вообще бомба. Ждем продолжения!!!

[@user-rx7kq3pr1w]

Привет Мир. Просмотрел на 2.0. Интересный материал. Форма подачи отличная. Летим.

[@maxlyshchyk2567]

React hooks useEffect Интересные задачки, было интересно посмотреть и подумать над ними. Спасибо, Димыч!

[@user-yk8zz3mw5y]

Спасибо за урок 🙏🏻 useEffect , всё предельно просто и понятно !

[@user-ms7jw8qd5h]

Спасибо, Димыч за такое качество материала! Ты крут, мужик

[@user-dn4ry3uw8i]

ждем продолжения Путь Самурая 2.0))) Hook useEffect, React JS

[@user-bg7ni7og9f]

Господи. это прекрасно. Много здоровья автору и благ.

[@sergeylv1411]

Спасибо за видос, с последним примером это жесть, каждый раз узнаю что-то новое

[@user-cp9ww8jl9e]

Димыч, спасибо за твои старания! Каждый раз с нетерпением жду видос! Про React hook useEffect очень хорошо рассказал!!

[@Medulla_oblongata01]

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

[@antysm1]

Фига. Почти 3 часа! Димыч, спасибо!!!

[@ITKAMASUTRA]

смотрите! контент на пару недель) пока выбрал темп - видео в 2 недели. Так как следующие хуки не такие масштабные и сложные. Попробую чаще публиковать видео

[@user-bt8qp1ic6f]

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

[@ITKAMASUTRA]

Огонь 🔥🚀 мчи

[@nepcz]

Спасибо, смотрю все твои видосы. Очень полезные видео

[@Villimon]

Дмитрий, спасибо вам большое за такой контент

[@user-dc9rv8df9k]

Требуем продолжения Пути Самурая...

[@n4t4lie80]

Спасибо огромное, отличный видос, очень такого не хватало. useEffect, hooks, react

[@ivanbag9741]

Спасибо, Диман!!! Как всегда очень круто всё изложил!

[@ITKAMASUTRA]

Спасибо за обратную связь

[@ruslandidun358]

Спасибо! Реально остановил и заставил сделать самому)) отдельное спасибо что разжевал что такое рефакторинг кода)

[@bohdanartiukhov3572]

Спасибо очень ждал твоего видео, сразу 👍

[@ITKAMASUTRA]

пожалуйста и спасибо за поддержку, мужик

[@yulia_kotlyar]

Наконец, useEffect ! С нетерпением жду остальные хуки

[@Mazafraka73]

Не хватает ещё про useEffect без массива зависимостей. Видео супер!

[@eduardkosyan1937]

Спасибо за курс !

[@user-np9mq5xc7j]

Димыч спасибо! Мы очень ждем новых видео от тебя!!!

[@Dendor3519]

Спасибо за огромную полезную работу.

[@kostyaggh8550]

Спасибо за урок, очень мощная информация!

[@TimkaSakenov]

Ух ёпт, почти 3 часа это мощно

[@crypto4elik]

эти архитектурные схемки в пэинте у димыча просто супер)

[@user-ze9rc3qx6i]

лайк! повторяю за тобой, но часто опережаю тебя и делаю самостоятельно!Спасибо

[@evgeniiAn]

благодарю, по новому посмотрел на useEffect! )

[@antontyronchik496]

Димыч, выпуск просто улетный! Интересные нетипичные кейсы, которые запускают электроны по извилинам. Спасибо за проделанное, хотим ещё) Главное чтобы тебе это приносило удовольствие п.с. привет из четверга инкубатора 😊 псс. с концовки знатно офигел) кто если не ты, нам вайтишникам такое покажет

[@antonomelchuk4721]

бомби димыч про остальные хуки ! спасибо тебе большое)

[@user-jx8ob6jp6w]

Огромный лайк! Крайне полезный контент

[@podpison3268]

Хорошая идея для использования useEffect, спасибо

[@user-ig9wc1we4m]

Димыч, спасибо тебе!! Про React useEffect лучше тебя никто не рассказал!

[@user-zs3lz3sn8q]

Огонь🔥 Делал сам, получилось проще) Спасибо за видос!)

[@gildorgames]

Лайк не глядя! Димыч то точно разжует за 3 часа))

[@user-lg3uy2lx9h]

Спасибо, спасибо Димыч. Ты делаешь огромное дело. #React #useEffect #hooks

[@ITKAMASUTRA]

пожалуйста. и спасибо за обратную связь!

[@egorpobylets6597]

Димыч, спасибо, за видом! useEffect понят!

[@user-qc1cn4dl8q]

Дима, спасибо тебе, ты супер заряженный чувак. Летим.

[@benjaminkats8138]

Димыч, видео топ!! С первого раза туплю ) Буду пересматривать!!

[@dnwmh]

Спасибо за полезные видео :)

[@melenium]

Я так рада что 2.0 продолжается!!!!!!

[@user-lg3uy2lx9h]

Ура ура ура, весь день ждал))) лайк не глядя

[@ITKAMASUTRA]

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

[@dimalukashenko4865]

Молодец Димыч, все очень хорошо разжевано.

[@rastyboss6584]

Дімич красава як завжди💪

[@user-tr8hr4xm1l]

Спасибо за урок, Димыч!!!

[@likeagokulight5350]

Огромное спасибо Мастер, очень интересно все )

[@ITKAMASUTRA]

🚀🔥 пожалуйста! Летим дальше!

[@user-ud4bj9vc7l]

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

[@user-ih6ie9ve6d]

супер познавательно и очень важно. спасибо!

[@denistrapeschonok471]

Спасибо за useEffect!

[@AndranikArshakyan]

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

[@GreatVolcano]

Ура! Ждём ещё хуки

[@user-gv3le1rb5k]

Димыч, забыл раскрыть вопрос с двумя сеттерами в useState (2:44:11). "Такой код ненадёжен", "сейчас пофилософствуем" и на этом всё)) Хотелось бы понять как правильнее это делать, чем просто поменять местами. За видос огромное спасибо, раскрыл глаза на многие моменты!)) Ждём новые выпуски))

[@user-ig4lq2ts8b]

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

[@ITKAMASUTRA]

Поздравляю с трудоустройством

[@user-ig4lq2ts8b]

@@ITKAMASUTRA спасибо Димыч, ты к этому тоже причастен )

[@DmitryJT50]

Уже давно устроился на работу, но поддержу видео комментарием) Большое дело делаешь

[@ITKAMASUTRA]

спасиб. Интересно будет твоё мнение (если посомтришь видос), со своим опытом, узнали ли что-то новое!

[@DmitryJT50]

@@ITKAMASUTRA я на шарпе под десктоп делаю в основном, по вебу очень мало задач дают, поэтому для меня все новое)) Все эти вещи смотрю больше из интереса, просто чтобы быть в теме)) Фидбек дам как осилю)

[@user-nw5br5jg9k]

Годнота, как всегда)

[@user-yf9ms4sd9e]

Наконец кто-то толково рассказал про React hook useEfferct

[@aakeykeyk8912]

Спасибо большое за Путь Самурая по react! Очень подробно и круто! Благодаря нему я два года назад начала работать и бомблю дальше!)

[@ITKAMASUTRA]

🚀🚀🚀

[@bohdanromanovich4912]

"Это ключевой момент. Если будете понимать то это прям Ваша победа. Мы не делаем запросы мы не делаем сайдэффекты мы их делаем меньше чем могли бы делать внутри онкликов"

[@evdokimoww]

Димыч, спасибо! Летим! react hooks хуки реакт useEffect

[@olegdegterov1595]

Кейс с перестановкой hooks вынос мозга. Узнал много нового.

[@hpcforum]

Большое спасибо, очень хороший урок. Очень прилично подтянул скилл, устроился на работу. Спасибо. Как более ни менее с финансами дела станут получше что-то отправлю. А вот на hh судя по всему сейчас очень трудно устроиться. Видимо времена такие.

[@__kawaii]

А как тогда устроился?

[@hpcforum]

@@__kawaii через hh))

[@randomizer3589]

#feedback Нравится ваше внимательность к деталям❤. У вас wrapping bug cases очень похожи with prod deployment)

[@lenafox6421]

Заставка просто огонь

[@serjdenisov2114]

Димыч, спасибо за подробное объяснение. PS: в cледующем видосе, на превьюхе (там где песня - Самурай) внизу пусти аккорды, буду исполнять когда настроение падает:))))))))))))))))))))

[@zhony-pony]

3 часа, жесть.. Димыч красавичк!

[@ITKAMASUTRA]

:)) летим-летим! useEffect - сложная штука

[@artem_sh564]

Димыч, спасибо за видос!)

[@iliaskadyrkulov6934]

Прямо бомба, Димыч сенсей! Поставил на паузу и подумал сам момент с таймером решить. Получилось так, чтобы зависимость была 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) } }, []) Дальше конечно так уже не работало бы. Классно, каждый раз что-то новое с ваших уроков! Так вот и посмотрел все выпуски, набрался неплохо! Буду бомбить дальше и лететь в космос! Спасибо!

[@__online7250]

Димыч, как всегда респект тебе за знания, которые вкладываешь в наши головы! Я реализовала самостоятельно сёрчи в нашей самурайской соцсети через хуки, но после твоего урока зарефакторила код, и он стал более читабельным, простым. Перенесла в юз эффекты все зависимости из онкликов и онченджев)) Спасибо, учитель!!! #React #useEffect #hooks

[@ITKAMASUTRA]

🚀🚀🚀

[@Serj1c]

спасибо, Димыч. Лайкос не глядя

[@ivankolesen3543]

Спасибо, круто, только можно было бы ещё про useLayoutEffect рассказать и в чем отличия)

[@reare]

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

[@_e_mask]

Димыч как всегда крейзи, Видос сразу после стрима, настоящий крэйзи мэн!

[@ashbarso7752]

Так жёстко это лучшее видео про useEffect, это бомба! Запиши плис про эвентлуп так же понятно

[@ITKAMASUTRA]

да-да-да!! в ближайшее время! потому что обещал миллион лет уже как

[@yuryitikhonoff9631]

Ай Димыч - красавчег. Респект за контент и глубину.

[@ITKAMASUTRA]

спасибо за фидбек!!!

[@StepanVorobiov]

Спасибо, Димыч. Просмотрел на скорости 2.0. Хотелось бы контент пожёстче. Гоу уроки по бэкенду (NestJs например)! Летим вперёд!!!

[@lenafox6421]

Димыч, ты красава!

[@user-nv7eb4mr4o]

Хотел первым оставить комментарий, да как тут успеешь ))) Спасибо за очередное видео! :)

[@ITKAMASUTRA]

спасибо за поддержку!! И пожалуйста! useEffect - тяжкая тема!

[@user-bk9bx4zv8m]

очень понравился урок

[@user-nb8qm7is8s]

Наконец-то я поняла hook useEffect React

[@ITKAMASUTRA]

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

[@vana__f7570]

Хук .з аффект просто топ!

[@vana__f7570]

Я бы хотел, чтобы разбор какого-то хука занимал от силы час

[@philipinhoi8091]

Где таймкоды?

[@gotcadumitru8154]

Даров, классный видос. Но у меня остались несколько вопросов. 1. Например нам нужно в useEffect сделать .addEventListener("scroll", scrollFunction) Типо при скролле вызывать функцию scrollFunction, но внутри этой функции берутся несколько значений из замыкания, но со временем они могут изменится эти значение, я понимаю что то что может изменится нужно поставить в [] у useEffect, и в useEffect сделать return ()=>... .removeEventListener("scroll") но будет ли правильно вот так при каждой изменении убирать и добавлять event ? 2. В примере с таймером когда из замыкания бралось неактуальное значение ты просто сделал (prev)=>prev-1 чтобы брать актуальное значение. Не думаю что так будет правильно: let secondsLocal setSeconds((prev)=>{ secondsLocal=prev return prev // например нам не нужно менять но нам нужно актуальное значение }) if(secondsLocal=2){ alert("hello") Как будет правильно брать актуальное значение если нам не нужно ее менять? Будет ли правильно через let currentSeconds = useRef(seconds) currentSeconds.current = seconds И потом использовать currentSeconds?

[@Evgeny..]

Знал useEffect, но с тобой, Димыч, он открылся по новому))

[@user-uc2xj2dh5f]

Дима, вот смотрела твой видос - он просто отличный по подробности, параллельно читала документацию реакт: нашла ошибки - правда, я не знаю, может такое допустимо, но по феншую, то есть по документации синхронизировать можно и нужно только с чем-то внешним по отношению к реакту: броузерное API, сервер, не-реакт модули, легаси какое-нибудь. А ты как раз чем дальше писал приложение, тем чаще синхронизировал пропсы друг с другом. Так делать не рекомендуют, поскольку это приводит к зацикливанию. Я вот вспомнила, что читала там же в документации про useState, и про наличие, отсутствие компонента - так вот: компонент демонтируется, если его нет в DOM, а там он может быть заменен на другой компонент (это я касательно сброса счетчика при замене юзера с одного на другого) если из родителя в переиспользуемый компонент userDetails будет передан key. мне вот после прочтения док очень мозолило глаз, что ты синхронизируешься с пропсами, сделала с key и - вуаля - счетчик, как child сбрасывается сам собой. Не претендую на абсолютную правоту - мой маленький рефакторинг, который, может, кому-нибудь поможет. Спецификация - отличная вещь! :) Димыч - замечательный учитель!