Кастомные хуки
Тема дорожной карты · React
Кастомные хуки — это JavaScript-функции, имена которых начинаются с use, инкапсулирующие и переиспользующие логику состояния в нескольких React-компонентах. Вынося вызовы встроенных хуков — useState, useEffect, useContext и useReducer — в кастомный хук, разработчики устраняют дублирование логики и сосредотачивают код компонента на задачах рендеринга. Кастомные хуки — основной механизм композиции в современном React, заменяющий устаревшие паттерны Higher-Order Components и Render Props для совместного использования поведения без изменения структуры дерева компонентов. Хорошо спроектированный кастомный хук, например useFetch, useDebounce или useLocalStorage, принимает параметры, возвращает значения или коллбэки и остаётся полностью тестируемым в изоляции. Умение писать и абстрагировать кастомные хуки — необходимый навык для React-разработчиков, создающих поддерживаемые и масштабируемые приложения.
Как это работает
Кастомные хуки — обычные JavaScript-функции, чьё имя начинается с use. Они подчиняются тем же правилам, что и встроенные хуки (вызов на верхнем уровне, никогда внутри условий/циклов) и могут звать другие хуки. Они упаковывают переиспользуемую stateful-логику — useFetch(url), useDebounce(value, ms), useLocalStorage(key, init) — и возвращают значения, коллбэки или и то и другое. useMemo(compute, deps) и useCallback(fn, deps) кешируют значения/коллбэки между рендерами, чтобы избежать лишних пересчётов или ререндера детей.
Когда применять
Выносите кастомный хук, когда один и тот же танец useState+useEffect появляется в двух компонентах — особенно если есть setup + teardown. useMemo — только когда профайл показывает дорогой пересчёт (иначе оверхед учёта превышает экономию). useCallback — в основном для стабилизации идентичности коллбэка для мемоизированных детей; для хендлеров, не выходящих за компонент, обычные функции ок.
Типичные ошибки
Ловушки Кастомные хуки: вынос хука для короткого кода, исполняющегося раз (premature abstraction); функция со state, названная useX лишь по конвенции, но не следующая правилам хуков; useMemo/useCallback повсюду "для производительности" (каждый добавляет memory + comparison overhead); эффекты внутри условных веток кастомного хука (ломает порядок хуков). Профилируйте перед оптимизацией; пишите хук, когда есть 2+ места вызова.