Когда не выносить хук

У кастомного хука есть стоимость владения: имя, файл и слой косвенности — и эта стоимость реальна вне зависимости от того, переиспользуется хук или нет. Читая инлайн-код, ты видишь поведение прямо там, где оно выполняется. Читая useUserForm(), ты видишь имя и должен прыгнуть к его определению, чтобы узнать, что он на самом деле делает, а затем прыгнуть обратно. Этот прыжок дёшев один раз; умноженный на экран, собранный из шести одноразовых хуков, он превращает чтение в сборку пазла. Вынос меняет локальность (всё в одном месте) на имя (ярлык, который можно переиспользовать). Сделка выигрывает только тогда, когда имя переиспользуется или инлайн-версия по-настоящему слишком велика для чтения.

// инлайн: поведение видно ровно там, где оно выполняется — нулевая косвенность
function ProfileForm() {
  const [name, setName] = useState("");
  const [bio, setBio] = useState("");
  // читатель видит всё состояние формы прямо здесь
}

По умолчанию вопрос не «выносить или нет» — а «вынос обязан выкупить больше, чем стоит косвенность, которую он добавляет».

Сигнал первый: единственный потребитель. Хук, используемый ровно в одном месте, почти всегда преждевременен. Весь смысл кастомного хука — делить логику с состоянием между компонентами. С одним потребителем делить нечего — ты перенёс код в другой файл и получил имя, но заплатил косвенностью и не купил никакого переиспользования. Честная версия держит код инлайн, пока реально не появится второй потребитель, и тогда вынос мотивирован настоящим дублированием, а не догадкой.

// преждевременно: у useProfileForm один потребитель — это просто тело ProfileForm в другом файле
function useProfileForm() {
  const [name, setName] = useState("");
  const [bio, setBio] = useState("");
  return { name, setName, bio, setBio };
}
function ProfileForm() {
  const { name, setName, bio, setBio } = useProfileForm(); // почему это не просто здесь?
}

«Может, переиспользую потом» — это YAGNI в форме хука. Выноси на втором использовании, а не на первой догадке — рефакторинг занимает две минуты, когда второй потребитель реален, и не стоит ничего до тех пор.

Сигнал второй: тонкая однострочная обёртка. Оборачивание единственного встроенного хука в кастомный добавляет имя, не добавляя смысла. useState(false) — уже полное, идиоматичное выражение, которое каждый React-разработчик читает мгновенно. Переименование его в useBoolean не покупает ничего — читателю теперь приходится выучить твоё имя для вещи, которую платформа уже назвала, и проверить, добавила ли твоя обёртка поведение или просто пробросила. Кастомный хук оправдывает своё имя, когда инкапсулирует нетривиальную логику: эффект с очисткой, подписку, производное вычисление, многошаговый автомат состояний. Сквозной проброс — чистый налог.

// тонкая обёртка: добавляет имя и файл, не инкапсулирует ничего
function useBoolean(initial = false) {
  const [v, setV] = useState(initial);
  return [v, () => setV(true), () => setV(false)] as const; // едва больше, чем useState
}

// в месте вызова это читается не лучше встроенного, а для нового читателя — хуже
const [open, openIt, closeIt] = useBoolean(); // против: const [open, setOpen] = useState(false)

Если тело хука короче его собственной сигнатуры плюс места вызова, ты не абстрагировал ничего.

Сигнал третий: сваливание несвязанного состояния ради «общего файла». Запихивание независимых забот в один хук связывает вещи, у которых нет причины меняться вместе. Хук, возвращающий { user, theme, cartCount }, потому что эти значения случайно оказались в одном компоненте, создаёт ложную зависимость: изменение логики корзины теперь трогает хук, который импортирует и код темы, а любой потребитель одного поля тянет за собой все. Когезия, а не число файлов, — вот метрика. Несвязанное состояние должно оставаться раздельным — три маленьких сфокусированных хука (или три инлайн-useState) бьют один сборный хук, единственный организующий принцип которого — «они существовали рядом друг с другом».

// связанная солянка: тема, авторизация и корзина не имеют друг к другу никакого отношения
function usePageState() {
  const [user, setUser] = useState<User | null>(null);
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [cartCount, setCartCount] = useState(0);
  return { user, setUser, theme, setTheme, cartCount, setCartCount };
}
// теперь переключатель темы и бейдж корзины связаны по изменениям через один хук без причины

У хука должна быть одна связная задача. «Живёт в том же компоненте» — это не задача.