23 - Hook useEffect / React JS - Путь Самурая 2.0 (+github api)
HTML-код
- Опубликовано: 18 окт 2024
- it-incubator.i... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
useEffect - самый важный хук. Хук для синхронизации, хук, который как и методы жизненного цикла классовых компонентов даёт нам возможность делайть сайд-эффекты прямо внутри функционального компонента. Легально))
Пример спользования useEffect из соц. сети первого сезона:
• 85 - React JS - hook, ...
Предыдущее видео про hook useState:
• 22 - Hook useState / R...
Поддержать проект монеткой: social-network...
А здесь бесплатная взаимопомощь:
t.me/reactjs_s...
Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutr. .
#useEffect #хуки #практика
![COLOMBIA vs. CHILE [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/TDjN4W3yy1k/mqdefault.jpg)
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 если что я не автор, я только таймкоды проставил🙂🙃
Большое спасибо тебе за твой труд!! Ты лучший учитель
Очень жду продолжение этого курса!!!
Кстаати... уже 1500 лайков и 15 000 просмотров есть. Пора бы следущий видос) Димыч ждем курс по Express и Nest, но про реакт не забывай плиз, иногда тоже закидывай сюда что-нибудь
Димыч, требуем продолжения данного плейлиста ! Давай откроем копилку на определенную сумму и будем донатить тебе на реализацию этого дела, кто «за» чтобы продолжить изучать с димычем путь самурая 2, лайк, достучимся до учителя 😂❤️🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
я за!
Пытался вот задонатить от души за труды Димыча, хотел написать сопровождающий комментарий о том, что очень жду продолжения React JS - Путь Самурая 2.0, но форма с донатом какая-то бездушная, перевести то переведёшь, а на что конкретно собираешься проинвестировать не указать. Копилка на конкретный курс звучит очень даже хорошо! Может так будет более понятно, чего ждут подписчики от канала и это мотивирует Димыча вернуться в то, с чего всё началось ;)
Давайте будем писать под каждым новым видосом на канале: Требуем Продолжение "Путь самурая 2.0"
@@shokhaway7219 go!)
@@shokhaway7219 в точку! Давайте )
Вот это годнота. Приложение интересное и понятное. Продолжил бы соцсеть, люди ждут) Хотелось бы посмотреть рефакторинг на современный синтаксис
ждем продолжения Путь Самурая 2.0))) Hook useEffect, React JS
Очень интересен ваш фидбек, ребят, узнали ли что-то новое, переосмыслили ли то, что знали, понимаете ли мощь хука useEffect?
Хук .з аффект просто топ!
Я бы хотел, чтобы разбор какого-то хука занимал от силы час
Где таймкоды?
Даров, классный видос. Но у меня остались несколько вопросов.
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?
Знал useEffect, но с тобой, Димыч, он открылся по новому))
Это настолько круто, что казалось бы курс предназначен для более осмысленных и продвинутых ребят, а ты продолжаешь так же великолепно раскладывать и доходчиво доносить информацию для всех, мега-лайк автоматом)))
Требуем продолжения Пути Самурая...
Спасибо, спасибо Димыч. Ты делаешь огромное дело.
#React #useEffect #hooks
пожалуйста. и спасибо за обратную связь!
Вот это человечище! Такой труд больше 2 часов. Обязательно посмотрю! Чего-то нового по любому узнаю!
🚀🚀🚀 100%!
Спасибо за обратку
Фига. Почти 3 часа! Димыч, спасибо!!!
смотрите! контент на пару недель) пока выбрал темп - видео в 2 недели. Так как следующие хуки не такие масштабные и сложные. Попробую чаще публиковать видео
С таким бесплатным контентом скоро все инфоцынане остануться без работы
🚀🚀🚀
Редко пишу комментарии. Но тут выше всяких похвал. Очень интересно. Спасибо
"Это ключевой момент. Если будете понимать то это прям Ваша победа. Мы не делаем запросы мы не делаем сайдэффекты мы их делаем меньше чем могли бы делать внутри онкликов"
Большое спасибо, очень хороший урок. Очень прилично подтянул скилл, устроился на работу. Спасибо. Как более ни менее с финансами дела станут получше что-то отправлю. А вот на hh судя по всему сейчас очень трудно устроиться. Видимо времена такие.
А как тогда устроился?
@@__kawaii через hh))
Мне кажется нужно отдельно плейлист с такими вот уроками запилить, как по мне, они более информативны и понятны. Мы сразу накинулись на сложный крупный тестовый проект и порой было ничего не понятно, а на мелких примерах все очень ясно и понятно
Димыч, спасибо тебе!! Благодаря твоим курсам уже третий месяц работаю react-разрабом!! Параллельно смотрю про Hook useEffect и про всё остальноео))
Спасибо за объяснения как именно все работает! Это мега полезно. Жаль что нет больше видео
Кейс с перестановкой hooks вынос мозга. Узнал много нового.
Ай Димыч - красавчег. Респект за контент и глубину.
спасибо за фидбек!!!
Наконец кто-то толково рассказал про React hook useEfferct
Спасибо Вам , после ваших видео я наконец-то нашла то что искала ,я теперь всю жизнь в программировании буду
Огонь 🔥🚀 мчи
Обязательно к просмотру. Давно ждал такого качественного ролика по хукам чтобы немного расширить собственное видение проблемы. Спасибо, бро! :)
эти архитектурные схемки в пэинте у димыча просто супер)
Спасибо очень ждал твоего видео, сразу 👍
пожалуйста и спасибо за поддержку, мужик
React hooks useEffect
Интересные задачки, было интересно посмотреть и подумать над ними. Спасибо, Димыч!
Супер супер супер! Пересмотрел несколько раз, теперь уже не так страшно смотреть на UseEffect) Давно ждал этого видео. Очень хочется еще такого же подробного разъяснения по промисам)
Будет!
Димыч, забыл раскрыть вопрос с двумя сеттерами в useState (2:44:11). "Такой код ненадёжен", "сейчас пофилософствуем" и на этом всё)) Хотелось бы понять как правильнее это делать, чем просто поменять местами.
За видос огромное спасибо, раскрыл глаза на многие моменты!)) Ждём новые выпуски))
Здравствуй Димыч!)
Спасибо тебе за прекрасый контент, за все уроки что ты делал и делаешь!
Будет ли продолжение? Я так на него надеюсь, ты лучший в этом сегменте. С нетерпением жду все 100 видео !
Философствую по поводу продолжения! Спасибо за фидбек
Супер, столько информации да ещё и на практике. Спасибо!)
Димыч спасибо! Мы очень ждем новых видео от тебя!!!
3 часа, жесть.. Димыч красавичк!
:)) летим-летим! useEffect - сложная штука
Дима, спасибо тебе, ты супер заряженный чувак. Летим.
IT-KAMASUTRA - лучшая в ютубе. Да и не только в ютубе. Рассматриваю переезд в Беларусь)!
Димыч, ну что ты за человек, не даешь расслабиться, только решил просмотреть и позже сделать, так ты сразу сказал, что я отношусь к числу ленивых)))ставлю на паузу и делаю рефакторинг)
Спасибо! Отличный формат) пишешь сначала сам ,как ты сказал, а потом сидишь фиксишь)
Лайк не глядя! Димыч то точно разжует за 3 часа))
Димыч, круто!!!! Мозги взрывает, но очень интересно и подробно объясняешь . А вот этот подход в объяснении - что откуда берется и куда попадает вообще бомба. Ждем продолжения!!!
Не хватает ещё про useEffect без массива зависимостей.
Видео супер!
Хорошая идея для использования useEffect, спасибо
Ребята, ставте лайки , ёмае, такой контент с пояснением нюансов!!! Это вам не счётчики делать по туториалу!!!
Дмитрий, спасибо вам большое за такой контент
Прямо бомба, Димыч сенсей! Поставил на паузу и подумал сам момент с таймером решить. Получилось так, чтобы зависимость была 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)
}
}, [])
Дальше конечно так уже не работало бы. Классно, каждый раз что-то новое с ваших уроков! Так вот и посмотрел все выпуски, набрался неплохо! Буду бомбить дальше и лететь в космос! Спасибо!
Дима, вот смотрела твой видос - он просто отличный по подробности, параллельно читала документацию реакт: нашла ошибки - правда, я не знаю, может такое допустимо, но по феншую, то есть по документации синхронизировать можно и нужно только с чем-то внешним по отношению к реакту: броузерное API, сервер, не-реакт модули, легаси какое-нибудь. А ты как раз чем дальше писал приложение, тем чаще синхронизировал пропсы друг с другом. Так делать не рекомендуют, поскольку это приводит к зацикливанию. Я вот вспомнила, что читала там же в документации про useState, и про наличие, отсутствие компонента - так вот: компонент демонтируется, если его нет в DOM, а там он может быть заменен на другой компонент (это я касательно сброса счетчика при замене юзера с одного на другого) если из родителя в переиспользуемый компонент userDetails будет передан key. мне вот после прочтения док очень мозолило глаз, что ты синхронизируешься с пропсами, сделала с key и - вуаля - счетчик, как child сбрасывается сам собой. Не претендую на абсолютную правоту - мой маленький рефакторинг, который, может, кому-нибудь поможет. Спецификация - отличная вещь! :) Димыч - замечательный учитель!
Димыч, спасибо! Летим!
react hooks хуки реакт useEffect
Привет Мир. Просмотрел на 2.0. Интересный материал. Форма подачи отличная. Летим.
Димыч, как всегда респект тебе за знания, которые вкладываешь в наши головы! Я реализовала самостоятельно сёрчи в нашей самурайской соцсети через хуки, но после твоего урока зарефакторила код, и он стал более читабельным, простым. Перенесла в юз эффекты все зависимости из онкликов и онченджев)) Спасибо, учитель!!! #React #useEffect #hooks
🚀🚀🚀
просматриваю на скорости 1.25, в целом запоминаю новые фичи и повторяю хуки, не переписывая код, так как подобная работа у меня уже есть, с таким же рефакторингом
Спасибо за курс !
Спасибо за видос, с последним примером это жесть, каждый раз узнаю что-то новое
Сегодня как раз бил голову над этим useEffect. Надеюсь видос поможет)
тема сложная. Надеюсь станет легче и понятнее хук useEffect
лайк! повторяю за тобой, но часто опережаю тебя и делаю самостоятельно!Спасибо
отличное видео, спасибо тебе за то что вернулся к записи видео и к таким важным темам
бомби димыч про остальные хуки ! спасибо тебе большое)
Так жёстко это лучшее видео про useEffect, это бомба! Запиши плис про эвентлуп так же понятно
да-да-да!! в ближайшее время! потому что обещал миллион лет уже как
благодарю, по новому посмотрел на useEffect! )
Димыч, спасибо тебе!! Про React useEffect лучше тебя никто не рассказал!
Крутой канал с крутым контентом!!!! Будет ли продолжение данного Плейлиста?
Ух ёпт, почти 3 часа это мощно
Наконец, useEffect ! С нетерпением жду остальные хуки
Димыч, спасибо большое за все твои уроки, за все старания, это огромная работа!
Димыч, надо собраться и снимать новые видео. Ведь мы вместе сделаем мир лучше. Когда-то в 15 веке была напечатана первая книга. Это событие поменяло мир, дало больше свободы мысли и людям. Сейчас IT - это новая книга.
Сэнсэй, вперед в космос! МЫ сделаем жизнь лучше!
Спасибо что заставил остановиться и проделать работу самой, все получилось! Твои уроки очень помогают изучать react! Ждем новых познавательных видео
Спасибо за объяснение useEffect в React. Мое мнение: родительскому компоненту не обязательно знать о каждом изменении таймера. Ему важно знать, когда таймер станет ноль. Когда это произошло, нужно затереть пользователя.
Господи. это прекрасно.
Много здоровья автору и благ.
Ура ура ура, весь день ждал))) лайк не глядя
сорри, что не успел к началу выходных!! Спасибо за лайк!
Спасибо, Диман!!! Как всегда очень круто всё изложил!
Спасибо за обратную связь
Спасибо, смотрю все твои видосы. Очень полезные видео
Молодец Димыч, все очень хорошо разжевано.
Спасибо за урок, очень мощная информация!
Димыч, видео топ!! С первого раза туплю ) Буду пересматривать!!
Уже давно устроился на работу, но поддержу видео комментарием) Большое дело делаешь
спасиб. Интересно будет твоё мнение (если посомтришь видос), со своим опытом, узнали ли что-то новое!
@@ITKAMASUTRA я на шарпе под десктоп делаю в основном, по вебу очень мало задач дают, поэтому для меня все новое)) Все эти вещи смотрю больше из интереса, просто чтобы быть в теме)) Фидбек дам как осилю)
Наконец-то я поняла hook useEffect React
спасибо, Димыч. Лайкос не глядя
Спасибо за урок 🙏🏻 useEffect , всё предельно просто и понятно !
Спасибо! Реально остановил и заставил сделать самому))
отдельное спасибо что разжевал что такое рефакторинг кода)
Спасибо, Димыч!
Hook useEffect / React JS / github api / useState
IT-KAMASUTRA
IT-INCUBATOR
Dimych best of the best!!!
Мне еще предстоит здесь оказаться. Пока что я на 62 уроке из Пути Самурая 1.0 /
Хотелось бы поблагодарить за такую работу и за подаренную возможность)
Интересно посмотреть, где мне предстоит оказаться, чему предстоит научиться)
Уже представляю, как пишу здесь второй коммент, преодолев все сложности на пути/
Силушки мне и всем Самураям)
Как там на 62 уроке? Я нахожусь еще на 25 уроке )
@@FreeLove-xl9vn Уже давно 100 урок позади) Дальше - интереснее)
@@FreeLove-xl9vn как там на 25 уроке я тоже только на 25
@@nspm_soul9459 устроился роботать?
@@nspm_soul9459 как дела?
ооооооооооо новый выпуск! за это время пока я ждал, пересмотрел первую часть, выучил TS и нашел работу ) но я все равно посмотрю)
Поздравляю с трудоустройством
@@ITKAMASUTRA спасибо Димыч, ты к этому тоже причастен )
Спасибо, Димыч за такое качество материала! Ты крут, мужик
Спасибо за огромную полезную работу.
Очень ждал нового урока по useEffect hook, спасибо.
Спасибо огромное, отличный видос, очень такого не хватало.
useEffect, hooks, react
Димыч, спасибо, за видом! useEffect понят!
Димыч, спасибо за подробное объяснение.
PS: в cледующем видосе, на превьюхе (там где песня - Самурай) внизу пусти аккорды,
буду исполнять когда настроение падает:))))))))))))))))))))
#feedback Нравится ваше внимательность к деталям❤. У вас wrapping bug cases очень похожи with prod deployment)
Посмотрел до конца, почти всё знал, думал, уже не будет ничего нового - и тут на тебе такая концовка! Спасибо огромное! Димыч, давай больше видео про нюансы React!
Димыч, спасибо за твои старания! Каждый раз с нетерпением жду видос! Про React hook useEffect очень хорошо рассказал!!
Дімич красава як завжди💪
Димон, ну 3 часа это уже задофига, реально. Очень круто было в 1.0, максимум по полчаса, а тут одно видео считай сразу на пол рабочего дня. Мне кажется многие и до середины не досмотрят
Да, кстати, не подумай, ты охеренно разжевываешь!) Просто чет долговато в этот раз вышло)) А так красава!
Хотел первым оставить комментарий, да как тут успеешь )))
Спасибо за очередное видео! :)
спасибо за поддержку!! И пожалуйста! useEffect - тяжкая тема!
Огромный лайк! Крайне полезный контент
Я все слушаю, пытаюсь сама, потом повторяю за тобой.
Спасибо за useEffect!
Я так рада что 2.0 продолжается!!!!!!
Мне бы, когда учился, это видео, я бы ещё круче был тогда!) сегодня хуки это тема, способная управлять жизнью компонента очевидно и просто!)
но к сожалению в современном продакшене, как у нас лично на проекте и на многих проектах, с которыми я знаком в моей компании, до сих пор используем концепцию ООП для контейнера, и помоему, если раньше я бы быдался и кричал, как это не правильно в современном Реакт, но сегодня я бы отдал всем методам жизненного цикла предпочтения, чем реализовывал это через юз еффект... Только для размышления))))
Это нормально, что очередной инструмент имеет и плюсы и минусы, сторонников и хейтеров. я люблю классы! И привык к ним! Но хуки заставляют мозг шевелиться иначе, а значит креативить можно и новые идеи рождать. Для продакшена всё-таки, на мой взгляд, не думая и не размышляя нужно брать хуки!
Спасибо, Димыч. Просмотрел на скорости 2.0.
Хотелось бы контент пожёстче.
Гоу уроки по бэкенду (NestJs например)!
Летим вперёд!!!
Димыч, бомба тема для следующего выпуска: React Router Dom V6! (переход на rrd6)
Огонь🔥 Делал сам, получилось проще) Спасибо за видос!)