Правила хуков
Тема дорожной карты · React
Правила хуков — это два обязательных ограничения, которые React накладывает на способ вызова хуков внутри функциональных компонентов и кастомных хуков. Во-первых, хуки должны вызываться только на верхнем уровне функционального компонента или кастомного хука — никогда внутри циклов, условий или вложенных функций, — чтобы React мог поддерживать стабильный порядок вызовов между рендерами и правильно связывать каждый вызов хука с его слотом состояния. Во-вторых, хуки должны вызываться только из функциональных компонентов React или кастомных хуков, но не из обычных JavaScript-функций, компонентов на основе классов или обработчиков событий вне React. Пакет eslint-plugin-react-hooks статически применяет оба правила хуков, выявляя нарушения во время разработки до того, как они вызовут ошибки в рантайме. Понимание причин существования правил хуков — система хуков 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+ места вызова.