Вынос кастомного хука

Кастомный хук именует и изолирует срез логики с состоянием — и это именование и есть настоящий продукт. Компоненты отвечают на вопрос «что это рендерит?». Кастомный хук отвечает на вопрос «какое поведение с состоянием у этого есть?». Когда ты вызываешь const debounced = useDebounce(query, 300), компонент читается как предложение: дебаунсни запрос. setTimeout, очистка, массив зависимостей — всё исчезает за именем, которое говорит, что они вместе значат.

// инлайн: компонент несёт механизм
const [debounced, setDebounced] = useState(query);
useEffect(() => {
  const id = setTimeout(() => setDebounced(query), 300);
  return () => clearTimeout(id);
}, [query]);

// вынесено: компонент несёт намерение
const debounced = useDebounce(query, 300);

Ничего в том, что выполняется, не изменилось. Изменилось то, что компоненту больше не нужно знать, как работает дебаунс, чтобы читаться ясно. Хук — именованная граница вокруг поведения с состоянием.

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

// useUser(id): тот же срез загрузки/loading/error, понадобившийся двум экранам
function useUser(id: string) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    let active = true;
    setLoading(true);
    fetchUser(id).then((u) => { if (active) { setUser(u); setLoading(false); } });
    return () => { active = false; }; // игнорируем устаревший ответ
  }, [id]);
  return { user, loading };
}

Теперь <ProfileHeader> и <AccountMenu> оба вызывают useUser(id). Флаг active, не дающий устаревшему ответу перезаписать более свежий, живёт ровно в одном месте — поправь однажды, выигрывают оба потребителя.

Выноси, когда у среза есть ясная, именуемая цель — даже при единственном потребителе, — потому что имя покупает ясность, а не переиспользование. Переиспользование — частый триггер, но не единственный валидный. Если компонент смешивает свою заботу о рендеринге с самодостаточным поведением, у которого есть имя — «отслеживать, онлайн ли окно», «прочитать это из localStorage и держать в синхронизации», — вынос делает компонент читаемым даже с одним потребителем. Тест в том, является ли срез настоящей концепцией, а не в том, есть ли у него два места вызова.

// сегодня один потребитель, но «онлайн ли мы?» — настоящая, самодостаточная концепция
function useOnlineStatus() {
  const [online, setOnline] = useState(() => navigator.onLine);
  useEffect(() => {
    const on = () => setOnline(true), off = () => setOnline(false);
    window.addEventListener("online", on);
    window.addEventListener("offline", off);
    return () => {
      window.removeEventListener("online", on);
      window.removeEventListener("offline", off);
    };
  }, []);
  return online;
}

Компонент, который его использует, теперь говорит const online = useOnlineStatus(); вместо того, чтобы держать четыре строки addEventListener. Концепция заслужила своё имя.

Режим отказа: хук с единственным потребителем, который есть просто переименованный useState, — чистая косвенность, без переиспользования и без выигранной ясности. Это та ловушка, из-за которой «выноси хуки» ощущается как карго-культ. Оборачивание одного куска состояния без логики в функцию с префиксом use ничего не переиспользует (один потребитель) и ничего не проясняет (механизма, который надо прятать, не было). Ты добавил файл и слой для чтения с нулевой отдачей.

// ❌ косвенность без отдачи: это useState в костюме
function useCount() {
  const [count, setCount] = useState(0);
  return { count, setCount };
}
// потребитель теперь *труднее* читать, чем `const [count, setCount] = useState(0)`

// ✅ это проходит планку: изолирует настоящее, именуемое поведение с логикой
function useToggle(initial = false) {
  const [on, setOn] = useState(initial);
  const toggle = useCallback(() => setOn((v) => !v), []);
  return [on, toggle] as const;
}

useCount ничего не прячет и ничего не переиспользует — удали его. useToggle пограничен, но защитим: он именует повторяющееся намерение и связывает логику toggle, чтобы потребители перестали переписывать апдейтер (v) => !v. Граница — это поведение или концепция, а не я положил это в функцию.