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

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

Кастомный хук (Custom Hook) в React — это JavaScript-функция, имя которой начинается с префикса use, которая может использовать другие хуки (такие как useState, useEffect, useContext и т.д.) и предназначена для переиспользования логики с состоянием между несколькими компонентами. Это одно из ключевых нововведений, появившихся с выходом React Hooks в версии 16.8, которое позволяет "вытащить" и инкапсулировать общую логику из компонентов в отдельные, независимые функции.

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

• Имя начинается с use: Это не просто соглашение, а правило, которое позволяет линтерам (например, ESLint с плагином eslint-plugin-react-hooks) корректно проверять соблюдение правил хуков внутри них.
• Используют другие хуки: Кастомный хук может вызывать любые встроенные хуки React или даже другие кастомные хуки.
• Не имеют своего JSX: В отличие от React--компонентов, кастомные хуки не возвращают JSX. Они возвращают данные, функции или любой другой результат, который затем будет использован в компоненте.
• Изолированное состояние: Каждый вызов кастомного хука создает изолированное состояние. Если два компонента используют один и тот же кастомный хук, они получат независимые копии состояния и эффектов.

Зачем нужны кастомные хуки? Решаемые проблемы

До появления хуков логика с состоянием (stateful logic) могла быть переиспользована только через:

1. Компоненты высшего порядка (HOC) — что часто вело к "оберточной путанице" (wrapper hell).
2. Render Props — что усложняло читаемость JSX.

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

Их основные цели:

• Устранение дублирования кода: Вынесение повторяющейся логики (подписка на данные, управление формой, работа с локальным хранилищем) в одну функцию.
• Упрощение компонентов: Компоненты становятся более чистыми и сфокусированными на рендеринге, вся сложная логика скрыта в хуке.
• Создание понятных абстракций: Хук инкапсулирует сложность за простым интерфейсом (возвращаемыми значениями).

Пример: Хук для подписки на размер окна браузера

Рассмотрим классический пример — хук, который отслеживает ширину и высоту окна браузера.

// useWindowSize.js - наш кастомный хук
import { useState, useEffect } from 'react';

function useWindowSize() {
  // 1. Инициализируем состояние с текущими размерами
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  // 2. Используем эффект для подписки на событие resize
  useEffect(() => {
    // Функция-обработчик, которая обновляет состояние
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    // Подписываемся на событие при монтировании
    window.addEventListener('resize', handleResize);

    // Вызываем обработчик сразу, чтобы установить актуальный размер
    handleResize();

    // 3. ОТЧИСТКА ЭФФЕКТА: отписываемся при размонтировании
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Пустой массив зависимостей = эффект выполнится только при монтировании

  // 4. Возвращаем текущие размеры окна
  return windowSize;
}

export default useWindowSize;

Теперь этот хук можно легко использовать в любом функциональном компоненте:

// MyComponent.jsx - компонент, использующий кастомный хук
import React from 'react';
import useWindowSize from './useWindowSize';

function MyComponent() {
  // Используем наш хук. Каждый вызов создает независимое состояние.
  const size = useWindowSize();

  return (
    <div>
      <h2>Размеры окна браузера</h2>
      <p>
        Ширина: <strong>{size.width}</strong>px
      </p>
      <p>
        Высота: <strong>{size.height}</strong>px
      </p>
      {size.width < 768 && <p>📱 Мобильный вид</p>}
    </div>
  );
}

export default MyComponent;

Правила работы с кастомными хуками

При создании и использовании кастомных хуков строго соблюдаются Правила хуков:

• Вызывайте хуки только на верхнем уровне. Не вызывайте их внутри циклов, условий или вложенных функций.
• Вызывайте хуки только из React-функций. То есть из функциональных компонентов или из других кастомных хуков.

Типичные сценарии использования

Кастомные хуки идеально подходят для:

• Управления формами: Хук useForm для обработки полей, валидации и сабмита.
• Запросов к API: Хук useFetch или useQuery для инкапсуляции логики fetch, состояния загрузки и ошибок.
• Работы с контекстом: Хук useAuth, который внутри использует useContext для доступа к данным пользователя.
• Таймеров и интервалов: Хук useInterval для безопасного управления setInterval.
• Локального состояния (localStorage): Хук useLocalStorage для синхронизации состояния React с localStorage.

Итог

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