Когда стоит выносить логику в отдельный кастомный hook?

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

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

Примеры использования

• Работа с API (загрузка данных, обработка ошибок, загрузка)
• Управление формами (валидация, отправка)
• Подписки на события (resize, scroll, WebSocket)
• Работа с localStorage или cookies
• Таймеры и интервалы

Пример кода

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

// Использование в компоненте
function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}

Вывод

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