Кастомные хуки в react

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

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

Кастомный хук - это обычная функция, название которой начинается с "use", и которая может вызывать другие хуки. Рассмотрим простой пример

const useBoolean = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);
  const toggle = (value?: boolean) => setValue((prev) => value ?? !prev);

  return [value, toggle];
};

Этот хук управляет булевым состоянием и предоставляет функцию для его переключения. Использование очень простое:

function Component() {
  const [isOpen, toggle] = useBoolean(false);
  
  return (
    <button onClick={() => toggle()}>
        {isOpen ? 'Закрыть' : 'Открыть'}
    </button>
  );
}

Принципы создания хуков

1. Единая ответственность: каждый хук должен решать одну конкретную задачу

2. Переиспользуемость: хук должен быть достаточно абстрактным для использования в разных ситуациях

3. Понятный интерфейс: возвращаемые значения и методы должны иметь очевидные названия

Часто в React-приложениях можно встретить такую реализацию

Главная ошибка создания хуков

Часто в React-приложениях или готовых пакетах можно встретить такую реализацию:

const useIsClient = () => {
    const [isClient, setIsClient] = useState(false);
    
    useEffect(() => {
        setIsClient(true);
    }, []);
  
    return isClient;
};

На первый взгляд, это обычный хук, который определяет, выполняется ли код на клиенте. Однако, давайте разберем, почему такой подход не оптимален:

1. Лишний рендер: При первом рендере isClient всегда будет false, а затем произойдет повторный рендер со значением true. Это приводит к ненужной работе.

2. Несоответствие SSR/CSR: Во время серверного рендеринга значение всегда будет false, что может привести к проблемам гидратации.

3. Избыточность: В современном React есть более простое решение:

const isClient = typeof window !== 'undefined';

Это не хук, а простая константа, которая:

• Определяется один раз при импорте модуля

• Не вызывает повторных рендеров

• Корректно работает как на сервере, так и на клиенте

Этот пример хорошо иллюстрирует важный принцип: не все решения в React должны быть хуками. Иногда простая утилитарная функция или константа может быть более эффективным решением.

Готовые решения

Хотя создавать собственные хуки очень полезно для понимания их работы, часто нет необходимости "изобретать велосипед". Существуют готовые библиотеки с большим набором оптимизированных хуков.

Одно из таких решений - @siberiacancode/reactuse. Эта библиотека предоставляет множество готовых хуков для различных задач:

• Управление состоянием

• Работа с DOM

• Датчики и события

• Анимации

• Сетевые запросы

• И многое другое

Преимущества @siberiacancode/reactuse