Все хуки ReactJS за 1 час

#React #ReactJS

В‌ ‌этом‌ ‌видео‌ рассмотрим все хуки в ReactJS (react hooks), рассмотрим кастомные хуки (пользовательские хуки), а также поговорим о том, что такое хуки, для чего они нужны, как появились хуки, какие есть правила использования хуков в реакт и.д.

Хуки в React - это функциональность, которая позволяет использовать состояние без использования классов. Появилась эта возможность с версии 16.8.

В функциональных компонентах нельзя было иметь состояние - они так и назывались stateless (соответственно классовые компоненты - stateful). Теперь же за счет использования хуков функциональные компоненты также могут иметь состояние. Функциональные компоненты является предпочтительным.

Классовые компоненты до сих пор доступны. Просто для того чтобы использовать методы жизненного цикла - не нужно переписывать функциональные компоненты на классовые. Для функциональных компонентов для работы с жизненным циклом компонента доступны хуки.

Хуки (React hooks) помогают переиспользовать логику; тестировать логику состояния отдельно от компонентов; помогают избегать большого количества оберток - компонентов, которые несут в себе логику, а не полезную разметку.

Мы в соцсетях:
💻 Сайт: https://it-dev-journal.ru
💻 Telegram: https://t.me/devmagazinechannel
💻 Twitter:   / _devmagazine  
💻 GitHub: https://github.com/vadimkorr
☕️ Поддержать канал: https://www.donationalerts.com/r/devm...

Плейлисты и курсы:
💡 Все о ReactJS:    • 📘 ReactJS  
💡 Как пройти ReactJS собеседование:    • 🚀 Собеседование React Frontend  
💡 ReactJS хуки:    • 🐠 React хуки  
💡 Redux:    • ☕️ Redux курс  
💡 Redux Saga:    • 🍏 Redux Saga курс  
💡 Как создать слайдер на ReactJS:    • 🎪 Как создать СЛАЙДЕР на ReactJS  
💡 Svelte:    • 🌴 Svelte курс  
💡 Sass:    • 📔 Sass курс  
💡 GraphQL:    • 💪 GraphQL  
💡 JavaScript:    • 📜 JavaScript  

00:00‌ ‌Что такое хуки в React JS?
00:01:59 Правила хуков в ReactJS
00:02:56 ‌Для чего нужны хуки в React?
00:03:40 ‌Какие есть хуки в реакт?
00:04:54 ‌useState
00:09:01 ‌useEffect
00:15:52 ‌useContext
00:24:25 ‌useReducer
00:32:41 ‌useCallback
00:36:55 useMemo
00:42:05 ‌useRef
00:49:43 ‌useImperativeHandle
00:53:39 ‌useLayoutEffect
00:57:42 ‌кастомные хуки в реакт (react custom hooks)
01:07:18 useDebugValue

#devmagazine #devmagazinechannel