Как создавать и применять кастомные хуки в React?

Как создавать и применять кастомные хуки в React?

• В React это функция с префиксом use
• которая объединяет логику, построенную на существующих хуках
• получает параметры и отдаёт состояние либо функции
• повышает уровень повторного использования кода
• вызывается в компонентах и имеет имя вида useXxx()
• помогает вынести бизнес-логику за пределы UI
• например, useFetch может загружать данные через API

Кастомные хуки представляют собой универсальные переиспользуемые блоки логики, созданные на основе React хуков.

Развёрнутый ответ

Основной ответ

В React кастомные хуки — это функции для повторного применения логики состояния и побочных эффектов в разных компонентах. Их имена начинаются с префикса use — например, useFetch и useForm. Внутри таких функций можно вызывать встроенные хуки React, включая useState и useEffect. Такой подход позволяет изолировать состояние или поведение, сделать структуру кода более понятной и упростить его сопровождение.

Основные моменты

• Для создания кастомного хука объявляют функцию, используют в ней стандартные React хуки и возвращают значения или функции, необходимые для работы с состоянием.
• При написании кастомного хука необходимо соблюдать правила хуков: вызывать их только на верхнем уровне компонента или другого хука, а не внутри условных конструкций.
• Кастомные хуки поддерживают принцип DRY (Don't Repeat Yourself), делают код понятнее и помогают логично разделять функциональность. Их часто применяют при выполнении запросов данных, валидации форм и работе с таймерами.

Практический контекст

Например, в React 18+ можно реализовать хук useFetch, который скрывает внутри себя загрузку данных с API, обработку состояния загрузки и ошибок, а затем использовать его в нескольких компонентах. Это уменьшает дублирование и упрощает сопровождение. Кастомные хуки также нередко объединяют с Redux, React Query или Context API, чтобы создавать более функциональные решения.