React Hooks (ui.dev)

React Hooks — это не просто инструмент для добавления состояния в функциональные компоненты. Это новая ментальная модель разработки на React, которая делает код чище, гибче и предсказуемее.

Почему разработчики выбирают React Hooks

Несмотря на популярность React, команда создателей посчитала необходимым внедрить Hooks, чтобы улучшить архитектуру и подход к работе с состоянием. В этом курсе вы узнаете исторический контекст появления хуков и разберетесь, какие преимущества они принесли экосистеме React.

Ментальная модель Hooks

Хуки требуют другого подхода к мышлению. Недостаточно просто выучить API — важно понять, как Hooks помогают организовывать логику и строить более удобные и предсказуемые компоненты.

Понимание useState

Вы изучите API useState и научитесь применять его в реальных сценариях: от простых значений до работы со сложными структурами данных.

Роль JavaScript Closures

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

Работа с побочными эффектами через useEffect

useEffect помогает управлять асинхронными операциями, подписками, сетевыми запросами и другими эффектами. Курс показывает не только базовое применение, но и сложные реальные примеры.

Критически важные правила работы с Hooks

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

Создание пользовательских хуков

Вы научитесь выносить повторяющуюся бизнес-логику в собственные хук-функции, заменяя устаревшие паттерны вроде HOC и render props на более компактные и понятные решения.

Продвинутые возможности React Hooks

useReducer

Освойте управление сложным состоянием на основе функциональной модели reduce, где одно действие определяет итоговое состояние.

useRef

Узнайте, как хранить значения между рендерами без повторной перерисовки и чем useRef отличается от хранения состояния через useState.

useContext

useContext упрощает передачу данных по древу компонентов. Курс показывает, как правильно работать с контекстом и избегать типичных ошибок.

useCallback и useMemo

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

useLayoutEffect

Изучите, чем useLayoutEffect отличается от useEffect и когда важно выполнять эффекты синхронно после изменения DOM.

Рефакторинг существующих React‑приложений

Большинство проектов создавались до появления хуков. В курсе вы научитесь безопасно и поэтапно переводить такие приложения на Hooks, улучшая структуру и поддерживаемость кода.

Полезные ссылки

https://coursehunter-club.net/t/react-hooks-tm

https://coursehunter-club.net/t/react-hooks-tm-2