#2: React Hooks - useEffect (классовый подход и функциональный)

📢 Платный курс по ReactJS с наставником: mentor.archakov.im/landing.html
❤️ Поддержка:
- Patreon: / archakovblog
- Донаты: www.donationalerts.com/r/arch...
📢 О чём я буду рассказывать?
Я решил сделать новый курс по React-хукам и рассказать подробно о том, как работает каждый хук. В данном видео, я рассказываю о хуке useEffect. Как он работает, зачем нужен и как переписать классовый компонент на хуки.
Видео по остальным хукам:
- useState: • #1: React Hooks - useS...
❓ Кому подойдёт этот курс?
Для начинающих, которые только начали изучать ReactJS и для тех, кто изучает более 3-х месяцев.
На каждый хук, есть отдельная ветка в репозитории ниже. Просто кликаете по "Branch" и выбираете нужный хук.
Ссылка на GitHub: github.com/Archakov06/react-h...
0:00 - Введение
1:26 - Какие методы жизненного цикла (lifecycle methods) есть?
3:20 - Как работают эти методы?
8:20 - Переписываем функциональный компонент на классовый
10:35 - Подключаем состояние для классового компонента (state)
12:25 - Делаем добавление случайного числа в стейт
15:35 - Определяем первый рендер (componentDidMount)
17:01 - Отлавливаем обновление компонента (componentDidUpdate)
22:21 - Отлавливаем удаление / размонтирование компонента (componentWillUnmount)
29:50 - Переписываем классовый компонент на функциональный и подключаем хук useEffect
32:23 - Как работает useEffect и что он принимает
41:31 - Резюмирую
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim

[@ArchakovBlog]

1:26 - Какие методы жизненного цикла (lifecycle methods) есть? 3:20 - Как работают эти методы? 8:20 - Переписываем функциональный компонент на классовый 10:35 - Подключаем состояние для классового компонента (state) 12:25 - Делаем добавление случайного числа в стейт 15:35 - Определяем первый рендер (componentDidMount) 17:01 - Отлавливаем обновление компонента (componentDidUpdate) 22:21 - Отлавливаем удаление / размонтирование компонента (componentWillUnmount) 29:50 - Переписываем классовый компонент на функциональный и подключаем хук useEffect 32:23 - Как работает useEffect и что он принимает 41:31 - Резюмирую

[@Nikrogan]

Не стоит открывать доступ к видео в период в 22:00 до 9-10 утра.По сео не очень

[@evdev1355]

Лучшее объяснение , на всем русско-язычном ютубе, спасибо вам!

[@Albert_Hall]

присоединяюсь!

[@vladvladov4095]

А Габилен Минин??

[@petrvictorovich]

@@vladvladov4095 Нееее, Минин - хуже. Хотя тоже молодец, конечно.

[@artyomsultanov5204]

@@petrvictorovich тут он не показал пример с зацикливанием useEffect

[@returborttech2822]

Отлично все разложил, даже мой кот теперь херачит на хуках

[@sergeystroitelev1964]

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

[@nk_77777]

Искал золото, а нашёл Платину!!!❤❤❤ Я просто в дичайшем восторге от данного контента! Видно, что автор чётко и по делу знает о чём говорит и объясняет материал без лишней воды!🔥🔥🔥 Конкретно видос - шикарен!!! 1) Объяснил принцип написания компонентов на классах(я никогда не юзал); 2) Объяснил методы жизненного цикла компонентов(а с этим у меня была каша); 3) Объяснил наконец-таки чётко и доступно принцип работы хука useEffect (я как-то вообще туго его понимал)! Бро, я прошу тебя, не забрасывай этот канал! Спасибо тебе огромное за такой качественный контент! Лайк, подписка, активация уведомлений!💪

[@strel9]

Шарю хуки после твоих уроков с пиццей. Лайк не глядя)

[@user-ib3cx2rn8q]

Чист для поддержки! Красавчик) - UseEffect - React - React-hooks

[@user-hg5or9kc9o]

Привет из 23 года, ты все еще лучший в объяснении хуков!

[@top-mma-news]

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

[@user-qx6gp9ci5d]

Просто жирный лайк, нигде не видел такого подробного объяснения 👍🏻👍🏻

[@Albert_Hall]

Пушка! Очень приятно слушать! Спокойно, с чувством, с толком, с расстановкой!! С уделением внимания мелочам, умалчивание которых другими авторами мешает понять суть!! UseEffect.

[@sergiisechka1993]

Mugik! Spasibo tebe very much! Finally I know what is useEffect used for! Actually it's a nightmare- like nobody is able to explain it!🤦🏻‍♂️🤦🏻‍♂️🤦🏻‍♂️

[@vseslavr]

Устроился зеленым джуном на проект и уже не первый раз возвращаюсь к твоим урокам по хукам, в частности к useEffect. Огромное спасибо тебе! С нетерпением жду уроки по остальным хукам!

[@munutd9857]

Ляяя, после твоего видоса я начал понимать как работает useEffect!!! До этого я знал только жизненные циклы,но не знал как их применить в useEffect! Теперь я знаю как это работает! Спасибо большое за урок👍👍👍

[@yulia_kotlyar]

Это было супер-понятно, наконец до меня дошло, спасибо)

[@aleksandrshturm1092]

Лучшее объяснение эффекта в ютубе

[@LeBron4eg]

Если бы этот парень был шаурмой, я бы взял две! Уроки супер, все очень доходчиво объясняешь! Продолжай в том же духе!

[@yaroslavweb6186]

Как я долго этого ждал!)

[@6xxBOSSxx9]

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

[@Albert_Hall]

несколько дней смотрю, пересматриваю. Кодю по памяти весь изложенный в видео код. Многие мелочи, которые знал, но до конца еще не забетонировались в мозгу, встают на свои места, т.к. автора приятно слушать и переслушивать. Премного благодарен!

[@astkh4381]

надо проекты для закрепления делать

[@user-cb8nd7yk5u]

классно объяснил. после просмотра этого урока вопросов не осталось.

[@user-zq5si7ld6m]

изучаю фронт уже около года, насмотрелась множество видео на эту тему. Но твои выпуски про пиццы и про хуки - особенные, суперпонятные! не знаю как это работает, вроде все всё объясняют примерно одинаково, но видимо нет))

[@intuza]

МУЖИК ПРОСТО ЦЕННЕЙШИЙ КЛАД ДЛЯ МЕНЯ. СПАСИБО ЗА ВАШУ РАБОТУ

[@sevgeek]

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

[@gowagowa7698]

Браво Маэстро! Всё доходчиво и понятно)!!

[@user-ri8jc4sp1h]

Спасибо, за доступное и понятное объяснение.

[@serjdenisov2114]

Спасибо за разъяснение. Хорошая подача материала

[@alexr0v]

Очень круто! Подписываюсь и с нетерпением жду еще!

[@user-rw3ry9bd6l]

Простое и понятное изложение материала. Спасибо!

[@alexeychernov3902]

Отличный материал, спасибо.

[@user-vv5ic5kt3x]

Огромное спасибо!!! Очень толковое, полное и внятное объяснение.

[@user-yq4cs2fe3u]

Блиииин! Как же ты круто объяснил, спасибо огромное !)

[@duce201]

Спасибо огромное за твой титанический труд!!! Очень доходчиво объяснил!!!!

[@santasaitbot7761]

Хорошо объяснил прям как хотелось с классового на хуки! Спасибо тебе большое!!!

[@olegsoul6016]

Шикарное объяснение! Разжевал все до самых мелочей, спасибо!

[@bashkort_erete]

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

[@HalauLilau]

спасибо. Все было понятно. Искал именно такой формат со сравнением подходов.

[@user-fk1qw1sh1g]

Спасибо большое, самое объёмное объяснение.

[@user-ug6kx3eb2g]

Все доходчиво и нравится, что затрагиваешь много моментов сразу)

[@boba2581]

Потрясающее объяснение

[@kril5903]

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

[@vitaliypasiuta8636]

Отличный урок, все ОЧЕНЬ хорошо понятно.

[@muborizDev]

Всё оказалось намного легче, спасибо

[@Kerimliful]

Добрый Вечер, Благодарю за такую безумно четкую подачу информации с разными подходами, примерами, да и в конце когда резюмировали всё что рассказали, прям был приятный взрыв мозга и всё сразу же стало по местам!!! СПАСИБО ВАМ ОГРОМНОЕ!

[@ragimabagirova6228]

пересмотрела немало видео на эту тему, но это самое лучшее Спасибо))

[@nikitagorchakov9591]

Спасибо большое за урок, очень понятно объяснил работу хука!

[@serg1221]

Абалдеть. Спасибо, очень доходчиво

[@theoty-js-react]

И КЛАССОВЫЙ ПОДХОД ВСПОМНИЛ !

[@unknown.6914]

Отличное объяснение темы, большое спасибо :)

[@yuryhouse4226]

Огонь! Как же четко все поясняет автор. Спасибо, круто!

[@Kirdaro]

Спасибо, очень детально объясняешь.

[@handmade_by_axnazar6744]

Прекрасное объяснение, спасибо большое. Наконец все понятно

[@evgeniylarin4224]

Очень круто, спасибо!

[@mikhaildevichensky6407]

после этого видео я очень жду дальнейших ваших работ !

[@sargisadamian4187]

Просто жирный лайк, спасибо очень

[@user-kf8cd9hm2x]

Большое спасибо за качественный контент! Ты действительно оч круто объясняешь материал, лучше я ещё не встречала. Продолжай пжл!

[@user-jf5ly9mg7h]

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

[@jest566]

brat 100 let tebe jizni ot vsego serdza jelayu ogromnoye spasibo za takoe objesnenee.. privet iz München 👋

[@alexanderksenofontov7531]

Очень доходчивое объяснение!

[@crlychar]

Это самое лучше объяснение! Спасибо автору! Ждем новый курс по react/redux😅

[@user-gd3zz1sk6c]

Очень крутое видимо. Всё рассказано понятно и доходчиво. Спасибо за урок

[@makssaga]

Огромное спасибо, ты очень круто объяснил, кайф)

[@Vooka45]

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

[@dotg6618]

от всего сердца спасибо! лучшее правда лучшее обьяснение что можно найти! поклон

[@MrAnyTwo]

Денис, спасибо! Теперь понимаю, как оно работает.

[@tatyanamaksymenko289]

благодарствую и за useState и за useEffect, отдельное спасибо за lifecycle methods!)

[@aleksandrbarabash2221]

Спасибо, реально толковое объяснение, много смотрел, но Ваше объяснение лучшее !

[@petrvictorovich]

Аааааа! Я пооооонял! Воооот, как оно работает! Спасибо, автор!

[@VolodymyrSirenko]

Спасибо за такое подробное объяснение! Это какое то чудо, я начал понимать useEffect!

[@danko5678]

Очень хорошее видео, помогло мне закрепить знания о реакте

[@AlikShyferiam]

лучшие уроки по React!!!!

[@user-vx9bb9ib3f]

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

[@EvgenyT2011]

Спасибо, очень доходчиво и лаконично.

[@nekom112]

Огнище. Спасибо за разъяснение. Отличный темп и стиль подачи. Максимально доходчиво.

[@user-lf9xi8gn8x]

Спасибо, очень подробно ✔️

[@holyholy413]

ОГРОМНОЕ Спасибо! 💥

[@alexward922]

Классный урок. Наконец-то понял что к чему да еще и про классы вспомнил. Однозначно лайк

[@user-vw8xb7xf4v]

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

[@user-gc7kz8du8x]

Очень наглядно получилось именно в сравнении с классовым подходом, благодаря этому в голове все уложилось. Спасибо вам😉

[@gregdmitriev2784]

крутотенька ! спасибо, дружище, прикольно объяснил

[@user-lc5fi3iw1k]

Спасибо! Ты все доходчиво объяснил! Респект👍

[@dmitryck8721]

Топовое объяснение 👍

[@artsiom450]

Отличное видео. Спасибо!

[@user-te9ci1tx4x]

Автор просто молодец, респект.

[@user-fd1np4pt7y]

Как же круто ты объясняешь. Скачал твои видосы и повторяю на работе (тут интернета нету). Спасибо за труды, за пиццу, за сникерс...

[@user-bo7mb9cf4d]

Отличное объяснение! Лайк

[@user-ku9md8kb4z]

Дик е хьон Хаваж! Спасибо за ролик, все четко и понятно!

[@user-fx5eb1zr7w]

Спасибо за информацию ❤

[@user-ky4vq5jm5u]

ВЫ молодец !!!отлично объясняете!!!

[@user-wj3qt2kd8o]

Просто нет слов!!!!!! Так всё четко, конкретно и понятно!!!!! И не только этот урок) А все видео на канале:) ОЧЕНЬ жаль, что еще не было этих видео года два назад)

[@theoty-js-react]

Различия между классовым и функциональным подходами, супер обзор

[@user-vu9pp3bm8f]

Спасибо, очень круто!!!

[@sichouli1914]

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

[@andrewgorun3203]

Спасибо, очень подробно и понятно!

[@novichoknovichok310]

Очень очень спасибо Вам!

[@Witcher-simple-YouTube]

Большой респект за такую подача материала! Важно, что автор знает своё дело на все 100

[@vinolinbright9604]

Не могла не написать комментарий. Очень круто объясняешь. Действительно, очень круто

[@ilushahoroshiy]

спасибо большое, очень классное объяснение!

[@aleksandrholoven2412]

Просто по полочкам разложил всё! Спасибо! React, hooks, useEffect, componentDidMount, componentDidUpdate, componentWillUnmount

[@user-ts7nd1zs7c]

Лучший. Спасибо!