Для чего нужно писать кастомные Hook?

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

Проблема, которую решают

Логика «состояние + эффект + обработчики» повторяется: загрузка данных, подписка на ресайз, дебаунс, работа с localStorage. До хуков её переиспользовали через HOC и render props — с обёртками, конфликтом имён props и «матрёшкой» в DevTools.

Пример

const useDebounce = (value, delay = 300) => {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);

  return debounced;
};

// в любом компоненте:
const results = useSearch(useDebounce(query));

Компонент читается как декларация: что используется, а не как оно устроено.

Что даёт вынос в кастомный хук

• Переиспользование: одна реализация — много компонентов.
• Читаемость: useOnlineStatus(), useCart() — самодокументируемые строки вместо простыни эффектов.
• Тестируемость: хук тестируется изолированно (renderHook), без рендеринга UI.
• Инкапсуляция: детали (таймеры, отписки) скрыты; поменять реализацию можно, не трогая потребителей.
• Композиция: хуки собираются из хуков (useAuth внутри useApi).

Главное

Состояние не разделяется между компонентами: каждый вызов хука — независимая копия state. Кастомный хук переиспользует логику, а не данные (для общих данных — контекст или стор).

Коротко для собеседования

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