85 - React JS - hook, useEffect, хуки

it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Хук (hook) useEffect позволяет нам сделать какой-то сайд-эффект после того, как компонента отрендериться. Что-то вроде методов жизненного цикла в классовой компоненте: componentDidMount + componentDidUpdate (2 в 1)
useEffect сложен по-своему, но очень крут! Попробуем на простом примере разобрать его действие!
А вот та самая статья про разжеванное объяснение от создателя:
habr.com/ru/company/ruvds/blo...
Обязательно гуглим эту тему в официальной документации!
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#useEffect #hook #reactJS

[@user-oy9mv8ek8y]

Всем привет. Поделюсь своей историей. Года три назад встал на тернистый путь погроммиста. Учился по курсам Димыча - сначала JS, потом React. Попутно обивал пороги разных компаний и что-то как-то не шло. Но в итоге свершилось, два года назад. Писать, правда, пришлось на ангуляре (и по сей день), но оффер я почил именно за петпроект социальной сети. С тех пор постоянно вспоминал Димыча с теплотой и обещал себе, что обязательно зайду, проставлю лайки за все видосы просмотренные (этот был последним перед оффером), и напишу комментарий (у меня их всего два за всю историю пользования ютуба, и этот второй). Но всё как-то забывал; заход в профессию был непростым - дальше больше... Но время пришло. Собственно, вот. Ланнистеры всегда платят свои долги c: Если ты тот человек, который это сейчас читает, то знай, что тебе очень повезло наткнуться на этот шикарнейший курс. Будет непросто - но оно того стоит. Если уйдешь в тильт - не бойся переключить внимание на что-то другое. Мне в своё спорт помогал морально отойти он неудач. Желаю тебе успехов и терпения

[@user-gk2qi6ip1p]

Мне так нравятся вот эти отступления Димыча вначале и вконце, просто мотивация на всё видео

[@fargutvest]

хуки запрещено писать в условиях, в циклах пример как вынести в 2 переменные результат хука - значение и функцию - сеттер значения let [applesCount, setApplesCount] = useState(8); нельзя в функциональной компоненте иметь sideEffect useEffect - это тоже хук, мы отдаем реакту функции как эффекты которые должны быть применены когда компонента отрисуется принимает функцию и массив с зависимостями useEffect( ()=>{ ... }, [a,b,c]) если не передать зависимости - useEffect будет выполняться после каждой отрисовки если передать пустой массив как зависимость - useEffect будут работать как componentDidMount Круто Спасибо! React Redux

[@yuritian8830]

Три года прошло. Как успехи?

[@antonaseyev3760]

Мой любимый коммент с хабра про хуки: rzcoder 12 марта 2019 в 20.04, +8 "Сначала добавляют в реакт функциональные компоненты, которые вроде как лишены бизнес логики, чистые как слеза младенца и легко тестируемы, и вообще сказка просто. А теперь вдруг функция вызывает какие-то неведомые эффекты, читает из чертегознает где хранящегося стейта, создает неопределенное количество замыканий… И все это на каждый вызов рендера."

[@user-zq5si7ld6m]

У тебя супер уникальная подача! Желание поднимается прогать. Часто смотрю монотонных блогеров, которые ещё к тому же подают тему так, как будто "итак всё очевидно же" - это загоняет в тоску. А ты не такой!😀 Ты знаешь проблемы новичков и что для них блин многие вещи неочевидны!

[@chtotutunas432]

Димыч из прошлого: лето заканчивается, я сделаю API-шку подороже. Димыч из будущего(на стриме): я сниму ограничения и сделаю API-шку бесплатной для всех 👏👏👏 Спасибо тебе Димыч за уроки!

[@maxim.saharov]

Поэтому друзья прошу поддержать Димыча ютуб подпиской на него - что бы он и дальше был мотивирован! всего 3 дол в месяц + еще специальные видосики становятся доступны!

[@v.volkau]

Впервые подписался на спонсорство ютуб канала. Мне как бэкэндщику уже сейчас очень сильно помогает понимание Реакта на работе. Это, конечно, очень крутой курс - всё по полочкам.

[@n0escape]

Краткий отчет по уроку: 1) использовали useEffect для синхронизации статуса из state и приходящего из DAL. Когда произойдет изменение статуса в глобальном state (пришел ответ с сервера), - мы перезапишем локальный state и перерисуем на его основе компоненту 2) useEffect - это хука о которая запускает какуето функцию после того, как все отрисуется и покажется на экране. 3) объявление хуков нельзя использовать в условиях 4) хуку useEffect можно подвязать зависимостью от определенного значения (если изменится значение переменной, вызовется функция которая внутри useEffect, и без введенного параметра - useEffect будет вызываться после каждой отрисовки компоненты) useEffect( () => { //логика функции которая внутри useEffect }, [параметр] ) В нашем случае useEffect выглядит следующим образом useEffect( () => { setUserStatus(props.userStatus) }, [props.userStatus] ) Мы подвязываем вызов функции из useEffect при изменении приходящего статуса из props. При изменении статуса в глобальном state, произойдет перезапись в локальном state и компонента перерисуется с новым значением

[@user-pd9no5ye5g]

Жыве Беларусь!!!

[@user-rp8oy2kf5d]

Слава Украине!

[@eugene-dmitrievich]

Спасибо большое за урок!!! Хуки useState, useEffect стали более понятными

[@user-cy4cz7zx4m]

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

[@__online7250]

🤩React JS - hook, useEffect, хуки

[@MikhailKuklenkov]

Выпуск огонь, Дима. Ты красавчик, самурай и настоящий шифу!))

[@denkodatskyi3381]

React JS - hook, useEffect, хуки Лучшие уроки по React JS & Redux !!! The BEST!!! lessons of React & Redux!!! Programming and Coding!!! Just simply about information technology =)

[@gorillatv577]

Бомби, Димыч, бомби видосы! Спасибо за твой труд!!!!

[@user-fs4sl5my1o]

Супер!!! Всё очень понятно о hook useEffect. Ко всему добавлю что этот хук ещё имеет возможность делать отписку, что-то типа componentWillUnmount, внутри хука в конце нужно возвращать функцию в которой будет происходить какая-то логика в тот момент когда компонент будет демонтирован, например useEffect(() => { window.addEventListener('scroll',handleScroll) return () => { window.removeEventListener('scroll', handleScroll) } },[])

[@user-bx7ly2th3b]

как componentWillUnmount он сработает только если deps будет [], а если есть зависимости - то поведение return уже будет другое

[@ctumyji9737]

Круто! Летим дальше! React JS от Димыча - лучший курс!

[@dimaksenchyn6444]

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

[@user-nk6ih7uh1h]

Большое спасибо за понятное описание концепции хуков. Тема про hook теперь стала намного понятнее, а useEffect- так вообще пушка, осталось только статью прочитать. Дима, береги себя, впереди еще более сотни уроков, и это только в рамках пути самурая)) Как всегда, лучший курс по React JS. Продолжаем подтягивать нативный JavaScript

[@user-bd4lw9hx3s]

Отличные уроки по React - Redux! Прекрасная подача информации! Дмитрий лучший! IT-KAMASUTRA, вперед!

[@mariia6820]

Объясняешь как Бог!Спасибо тебе еще раз,полетела штудировать статью!!

[@bruksbond1]

Спасибо Димыч за твой труд! Супер!!! Подробный разбор React JS - hook, react хуки, useEffect, useState

[@dychkos]

85/100 - Идём дальше! (04.04.21)

[@user-vj6ov3sc6b]

как успехи

[@is_eliseeva]

Спасибо за урок! утром на повтор, чтобы информация усвоилась. лайк, подписочка

[@theWorldIsMultivariate]

Спасибо за урок по useEffect, до этого непонимал, зачем нужны зависимости. Просто использовал. Теперь всё ясно )

[@Ddddddddyu]

21 декабря 2021. Статус по какой то причине ни разу не пропадает, при перезагрузке в input всегда есть. (в hook компоненте) Возможно уже пофиксили

[@user-rf7dw5tc7n]

Спасибо, я сам решил эту задачу, но не до конца понимал, что именно я сделал, хотя изучил статью Дэна Абрамова вдоль и поперёк. А тут ты до конца помог осознать весь происходящий процесс :)

[@user-qv9nm2su7d]

Освежила в памяти useEffect, спасибо)

[@sergedelicious3186]

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

[@Lastiqe]

Крутое объяснение react hooks. Спасибо димыч, всё понятно

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@Smash69ful]

Отличный курс. React JS - hook, useEffect, хуки

[@eXacT9090]

Давно ждал! Спасибо

[@user-di9dd7bb4l]

Спасибо за курс!!! React JS - hook, useEffect,хуки

[@miguelgrushetckii4839]

Спасибо Димыч! все очень понятно) надеюсь и статья так же легко пойдет! hook, useEffect, react, redux

[@belle-nastja]

Спасибо, курс просто космос !!!!!

[@user-wj6ue7nt5g]

Все круто!!! бомбим до конца!

[@ivanmiarkulau8320]

и снова спасибо за рассказ о хуке useEffect!)

[@user-pv5is5pz4j]

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

[@nataliabannikova8024]

Обожаю лирические отступления!

[@user-sw6jv3ot4z]

Просто про React JS - hook, useEffect. Дякую!

[@user-wx9hk4xz2w]

еще чуть чуть осталось, спасибо димыч !

[@Andrei-nr2oi]

React Hook! Летим дальше! Димыч красавчик, спасибо за хорошие объяснения!

[@TRIZ-Bogatyregold]

Максимально актуальный выпуску про useEffect! Спасибо Димыч! Летим Бро!

[@ole_oli]

Спасибо ДИмычь. Бомбим дальше!!!React Redux, hook, useEffect

[@tatianakruglaya6760]

Отличная статья. Осилила в два подхода!!! Спасибо за видос React JS - hook, useEffect, хуки и подробное разжевывание материала про hook, useEffect, хуки, да и , в принципе, за React JS. На теории React JS - hook, useEffect, хуки вроде как все ясно. Открываем мир React JS - hook, useEffect, хуки вместе с Димычем. Спа-си-бо!

[@hennadiipetrov1967]

Спасибо, Димыч)

[@derrylsshowhh3249]

Димыч харош,уже поскорей хочу перейти к 2 версии курса)

[@Abdul-hy4cy]

Из-за того что у тебя светло в комнате, я аж обрадовался и захотелось учиться. А то немножко взгрустнул, сижу 7-ой час учусь. ночь на дворе. один

[@milter2539]

Урок 85. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:

[@user-wh5bj9dn2z]

Как сейчас дела бро?

[@milter2539]

@@user-wh5bj9dn2z сейчас немного подзабил на проект: увидел проблему в том, что я мало действую как экологический активист - поэтому сейчас я больше перешел на действия в реальном мире и нахождение ЦА. Возможно, если найду команду единомышленников, то продолжу (: Для чего спрашиваешь?

[@amaxe12345]

Спасибо! React JS - hook, useEffect, хуки #useEffect #hook #reactJS

[@walterlexxx]

За день статью осилил, лайк и полетели!

[@naiz4005]

Круто! Спасибо, повторил useEffect

[@johnmj750]

СПАСИБО, ДИМЫЧ!!!

[@user-in5qb3ml4l]

Летим !

[@ervinabliamitov2149]

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

[@__maxsoul643]

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

[@user-np9mq5xc7j]

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

[@user-il3vn7ye4n]

React JS, useEffect разложил по полочкам))) Димыч ты крут!)))

[@dimitriitkach7697]

spasibo za urok - React JS - hook, useEffect, хуки

[@Snegurjan]

Летииим в Космос )))React JS - hook, useEffect, хуки

[@semial]

Спасибо за урок!!! В целом, всё понятно, но придется вернуться заново и пересмотреть! #hook #useeffect #react #redux #reactredux #itkamasutra

[@itweb7157]

Дима, спасибо! #React #JS - #hook, #useEffect, #хуки

[@wild_wizards]

Лайк! Отличный хук. Едем дальше.

[@marksobolev9059]

Зашёл, поставил лайк, начал просмотр. Только в таком порядке

[@anastasia__kot]

Спасибо за крутой курс React redux hook useState useEffect

[@StanislavObrazcoff]

да ты просто Агонь! Супер!

[@oconnor4417]

Димыч ты топ, летим дальше ❤

[@marsonleonardovich4036]

Всё круто! hook, useEffect, хуки

[@tamararagimova4035]

офигенный курс!! Димычу респект )) 07.01.22 Кстати все прекрасно синхронизируется и без Use Effect

[@HorbachenkoVlad]

То же смое))) Вот тольо почему оно работает😅

[@user-wv8wj4wc4c]

Действительно, синхронизируется и без Use Effect. Июль 2022.

[@user-gr7bm5ll5w]

Димыч, так круто что ты дал ссылку на статью Дэна Абрамса перед изучением этой главы. Не один день уже потрачено, но прям чувствую, что расту сам над собой. Я властелин колец! Спасибо тебе огромное, с меня магарыч, как закончу 100 урок 👍

[@vladimirww5152]

Мощный инструмент таки, эти Хуки!)

[@mikhail_shokun]

Димыч, все красиво React JS - hook, useEffect, хуки #ReactJS #hook #useEffect #хуки

[@user-yx7in9nl1d]

Спасибо большое!!! Конечно на хуках я подвис, но ничего, прорвёмся))

[@VasylBatih]

чаще смотри в консоль! бомбим дальше!

[@user-vj8hj9jk2b]

Hook useEffect - крутая вещь! Димычу респект)

[@sergeyistominov5880]

Плюсик для лучшего ранжирования !)

[@ashbarso7752]

спасибо большое, за хуки за понимание useEffect

[@user-ml5vp6rp9n]

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

[@user-tz9rc7hn6y]

Спасибо! Очень интересно! Хуки - это круто! P.S. Список ключевых слов: React, Redux, лучшие супер курсы, бесплатно, hook, хук, useEffect

[@romanpomin1967]

Хук useEffect призван заменить методы жизненного цикла классовых компонент: componentDidMount, componentDidUpdate componentWillUnmount. Одно из преимуществ - то, что не нужно разбивать логику и привязывать её к конкретному методу жизненного цикла.

[@mszulya4100]

спасибо за контент!

[@samolevich]

Бомбео!

[@Serhii.T]

Смотрю, и понимаю, что все видео можно было вместить в 2 мин, а как Вы умудряетесь разжевать так, чтобы прям все все по полочкам, я не понимаю😁 Круто, спасибо)

[@ITKAMASUTRA]

:))) летим!

[@egorepir]

Ох Hooks для первого знакомства тяжеловаты , но думаю это только пока у нас не было пару интимных💋 встреч , будем почти как родные. Уже на 85 уроке , а кажется что только-только 10-й смотрел и вникал что тут происходит , в целом это тяжелый путь, но когда понимаешь какие перспективы тебя ждут останавливаться и не надеюсь, летим вперед и только вперед.🚀 React JS - hook, react хуки, useEffect, useState. Спасибо за твой труд Дмитрий. 👏

[@aalolooo]

Cool video and music at the end.

[@xtereone]

Димыч Красава!)

[@user-xs2dx2mh3f]

Димыч как всегда крут, Все очень мега понятно!!!!!!!!!!!!!!!

[@konstantinkuksov914]

react js, hook, useEffect !!! крутяк !

[@the_secret3130]

Идём вперёд !!!!!!

[@dob1wan174]

React JS IT-KAMASUTRA Redux спасибо Димич!

[@resenpaii]

Все еще тут ) Хуки на первый взгляд гораздо проще, чем жизненные циклы.

[@user-wd3tl2rx9p]

Дима, спасибо

[@synchronization666]

Thank You!

[@marina-ej4qd9kc1wh]

спасибо, все супер

[@user-wj2qg3wm5v]

Круто! React Hook

[@ringnull]

Лето только начинается )

[@seriogaromanchykov9451]

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

[@esken97]

Спасибо Димыч)

[@user-pl9bm6pv8z]

Thanks Dimych!!!!!!!!!

[@Abdul-hy4cy]

0:35 Димыч уже плывет конкретно.... В Москвах, Украинах .. хахахха. Отдыхай Димыч побольше. Красавчик !