Custom React Hooks

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

Что такое кастомные хуки в React

Кастомные хуки — это пользовательские функции, имя которых начинается с use и которые позволяют инкапсулировать повторяющуюся логику с использованием возможностей React-хуков.

Почему стоит использовать кастомные хуки

• Уменьшение дублирования кода.
• Повышение читаемости и поддерживаемости.
• Логическое разделение функциональности.
• Создание собственных абстракций поверх стандартных хуков.

Когда стоит создавать кастомный хук

Не каждый кусок логики нужно превращать в хук. Однако кастомный хук оправдан, если:

• Один и тот же фрагмент логики используется в нескольких компонентах.
• Компонент становится слишком сложным и перегруженным состоянием.
• Есть необходимость скрыть сложный или повторяющийся код за простой функцией.

Как создать кастомный хук

Основные правила

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

Пример простого кастомного хука

function useToggle(initial = false) {
  const [value, setValue] = React.useState(initial);
  const toggle = () => setValue(prev => !prev);
  return [value, toggle];
}

Лучшие практики при работе с кастомными хуками

• Делайте хуки маленькими и понятными.
• Добавляйте документацию и четкие имена — хук должен объяснять своё назначение.
• Выносите побочные эффекты в отдельные хуки, если они сильно усложняют логику.
• Пишите тесты, особенно если хук критичен для логики приложения.

Распространенные типы кастомных хуков

Хуки для работы с состоянием

Например, кастомная логика инкремента, счетчиков, фильтров, форм и т.д.

Хуки для работы с API

Создание собственного аналога useFetch или хука для работы с WebSocket.

Хуки для обработки событий

Например, отслеживание кликов вне элемента, положение курсора, события клавиатуры.

Хуки для UI и анимаций

Логика открытия/закрытия модалок, плавные переходы, управление фокусом и т.п.

Заключение

Создание кастомных React-хуков — это мощный инструмент, который помогает структурировать логику, улучшать читаемость кода и сохранять проект гибким и расширяемым. Чем больше вы практикуетесь, тем легче становится выявлять повторяющиеся шаблоны и превращать их в переиспользуемые хуки.