Вынос логики в хук
Тема дорожной карты · React
Вынесение логики в кастомный хук — это паттерн React, позволяющий перемещать логику состояния или побочных эффектов из компонента в переиспользуемую функцию, имя которой начинается с use. Кастомный хук может вызывать встроенные хуки — useState, useEffect или useContext — и возвращает всё, что нужно вызывающему компоненту. Такое вынесение позволяет компонентам сосредоточиться на рендеринге JSX, тогда как хук инкапсулирует задачи — загрузку данных, обработку форм или подписку на события, — что значительно улучшает переиспользование кода во всей фронтенд-кодовой базе. Кастомные хуки следуют тем же правилам, что и встроенные React-хуки: они должны вызываться на верхнем уровне компонента или другого хука, но никогда внутри условий или циклов. Освоение вынесения логики в кастомный хук — один из наиболее значимых навыков для написания чистого, поддерживаемого кода управления состоянием в 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+ места вызова.