React видеокаст #2 Полное введение в Хуки

#YauhenK #webDev #React
Всех приветствую в скрин-касте «React видеокаст».
И в этом выпуске мы с вами рассмотрим такое понятие как React Hook (Хук). Разберёмся зачем они нужны, синтаксис их создания, использования, а так же их особенности. Рассмотрим каким образом они расширяют возможности функциональных Реакт-компонентов. Представленные хуки делятся на базовые и дополнительные, но мы с вами рассмотрим только базовые. Так как именно базовые хуки с большей вероятностью могут появится в ближайших обновлениях библиотеки React. К базовым хукам можно отнести:
useContext - Хук для использования контекста.
useState - Хук для использования стейта внутри функционального компонента.
useEffect - Хук, аналог методов жизненного цикла.
А так же в небольшое дополнение мы рассмотрим создание пользовательских хуков.
✒ Репозиторий видео-каста:
✔ GitHub: github.com/Yau...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...

[@БекназарКемелов]

Тайм-код: Intro - 3:32 useContext - 6:26 useState - 9:49 useEffect - 15:09 custom(пользовательские) hooks - 23:00 Спасибо автору!

[@КонстантинК-ю1м]

Спасибо, очень понятное объяснение! Как раз вчера разбирался с хуками, бился с бесконечным ререндером :)

[@YauhenKavalchuk]

Пожалуйста!

[@alex65656]

Очень крутой видос, все грамотно рассказано, качественно подано. Спасибо за вашу работу!)

[@YauhenKavalchuk]

Спасибо большое за отзыв!

[@alexmorgan1030]

Спасибо, отличные подкасты. Всё очень доходчиво!

[@YauhenKavalchuk]

Спасибо большое за фидбэк!

[@zoojs]

Большое спасибо! Отлично объясняете!

[@YauhenKavalchuk]

Пожалуйста!

[@ШураБосс]

Спасибо большое! Отличный обзор возможностей!

[@YauhenKavalchuk]

Пожалуйста!

[@Teardrop-u4z]

Очень понятно и доходчиво.

[@YauhenKavalchuk]

Спасибо!

[@tamerlan881]

Спасибо за видео. Очень полезно было. На 17:49 ошибка в коде. Если убрать 22 строку, то все равно будет изменяться width. Нужно написать const handleWidth = () => setWidth(window.innerWidth);

[@YauhenKavalchuk]

Да, полностью согласен!) Спасибо большое, поправил и в репозитории!

[@zoojs]

Блин, не понял. А можете объяснить зачем создавать функцию handleWidth?

[@Мишаня-ю9б]

@@zoojs addEventListener вторым параметром принимает callback(handleWidth) который запускается при изменении окна.

[@Rapterlol]

Очень доступно объяснил! Спасибо большое!!

[@YauhenKavalchuk]

Пожалуйста!

[@user-ei9jd7pw4s]

Крутяк, СПАСИБО!!! Супер понятно и просто.

[@YauhenKavalchuk]

Пожалуйста!)

[@prsion1925]

Вы лучший - Спасибо!!! даже я чайник который только знает три метода call bind и apply и все время не помнит методы массивов и ТО что-то понимаю)!!!!!

[@YauhenKavalchuk]

Спасибо за отзыв!)

[@oerbyy]

Отличный видос! Просто супер, занесу в шпаргалки! Спасибо 8)

[@YauhenKavalchuk]

Пожалуйста

[@lexxin0502]

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

[@YauhenKavalchuk]

Пожалуйста, ох честно не скажу это было почти 2 года назад, много воды утекло...)

[@erwererwrwr]

Спасибо за урок, Евгений! Все по полочкам Будет ли ещё в будущем что-то разобрано по хукам?

[@YauhenKavalchuk]

Думаю да. Как только они будут добавлены в официальный релиз тут же сниму новый подкаст с разбором. Т.к. уже сейчас видно, что будут дополнения)

[@Andrew-strong]

Спасибо за грамотное объяснение! Ваш канал на сегодняшний момент - лучший по Реакту! Вопрос по рассмотренному материалу: вы на "

[@YauhenKavalchuk]

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

[@npc6110]

Было бы хорошо если бы написали какое то маленькое приложение с hooks. Но и так норм

[@YauhenKavalchuk]

Спасибо!)

[@zoojs]

Так он же написал, разве нет?)

[@МаксимНырков-у6г]

а вот и стейт появился в функциях)) ура!

[@YauhenKavalchuk]

То о чём я и говорил)

[@VitalyLiber]

Оч круто! Подписался =)

[@YauhenKavalchuk]

Круто!)

[@stasdusha]

Красапета! Хорошо обьясняешь

[@YauhenKavalchuk]

Спасибо)

[@stasdusha]

@@YauhenKavalchuk Давай еще саспенс и и дата саспенс?

[@YauhenKavalchuk]

Честно говоря, в этих подкастах я планировал рассказывать о том что появляется с выходом новой версии (мажорные изменения). Хуки - это было не большое исключение. Хотя не исключено, что расскажу про suspense, но это не точно)

[@stasdusha]

@@YauhenKavalchuk Потому что хуки пушка! Они очень изменят стиль написания реакт приложений, это точно. Ну а саспенс то уже есть

[@dzmitrysamsonau3586]

красавчик Женя

[@YauhenKavalchuk]

Спасибо!)

[@abathojalyk1625]

Cool! Vse chetko, bez vody.

[@YauhenKavalchuk]

👍

[@jony4you]

тоже, что и в либе recompose, только теперь не надо врапать компоненты

[@YauhenKavalchuk]

Возможно, лично мне не доводилось с ней работать)

[@pumych]

Спасибо за понятное обьяснение. 16.38 А если не добавлять document.title = value; внутрь useEffect, то работать не будет?

[@YauhenKavalchuk]

Будет

[@ЕвгенийЖ-н6м]

Евгений, почему то ваш код из гита выдает ошибку при нажатии на кнопку Warning: An effect function must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) or returned a Promise. Instead, write the async function inside your effect and call it immediately: useEffect(() => { async function fetchData() { // You can await here const response = await MyAPI.getData(someId); // ... } fetchData(); }, [someId]); // Or [] if effect doesn't need props or state Learn more about data fetching with Hooks: fb.me/react-hooks-data-fetching in App (at src/index.js:7) index.js:1452 The above error occurred in the component: in App (at src/index.js:7) Consider adding an error boundary to your tree to customize error handling behavior. Visit fb.me/react-error-boundaries to learn more about error boundaries. index.js:1452 TypeError: destroy is not a function Подскажите пожалуйста в чем дело ?

[@YauhenKavalchuk]

В официальной версии изменился синтаксис. Посмотрите следующий выпуск, я там говорю об этой проблеме

[@МаксимНырков-у6г]

Приветствую! В будущем от классов может вообще избавятся в реакте? Будут только функции

[@YauhenKavalchuk]

Пока об этом никакой информации) Возможно...)

[@bogdanshelomanov5668]

вот так только отрабатывает () => setWidth(window.innerWidth)

[@YauhenKavalchuk]

В комменариях о этой проблеме писали, можно найти. В любом случае, в репозитории актуальная версия.

[@davtian1674]

аа как обновить состояние пользовательского хука

[@YauhenKavalchuk]

Либо логика внутри хука через useState, либо передаёте снаружи

[@bogdanshelomanov5668]

такой же код, но addEventListener не срабатывает

[@dmitrymukhin9458]

const handleWidth = () => setWidth(window.innerWidth) надо

[@zoojs]

@@dmitrymukhin9458 а почему? И куда это вставлять?

[@YauhenKavalchuk]

¯\ _(ツ)_/¯

[@АлексейВатман-з2ф]

скажите пожалуйста, какой шрифт вы используете здесь в редакторе? очень понравился

[@YauhenKavalchuk]

Точно не помню, но вроде Anka/Coder. Вообще это плагин для Atom - Fonts, там полно хороших шрифтов

[@АлексейВатман-з2ф]

@@YauhenKavalchuk спасибо!

[@YauhenKavalchuk]

Пожалуйста