Хуки как headless-паттерн

Headless-хук возвращает поведение, никогда разметку — useX() даёт тебе состояние плюс обработчики и пропсы для подключения, а рендеришь ты что хочешь. «Headless» значит, что у логики нет мнения о DOM. Хук владеет что (открыто/закрыто, toggle), а вызывающий владеет как (<button>, <details>, кастомная карточка). Начни с минимальной формы: состояние и действия, которые его меняют.

import { useCallback, useState } from "react";

function useDisclosure(initial = false) {
  const [isOpen, setOpen] = useState(initial);
  const open = useCallback(() => setOpen(true), []);
  const close = useCallback(() => setOpen(false), []);
  const toggle = useCallback(() => setOpen((v) => !v), []);
  return { isOpen, open, close, toggle };
}

Этого уже хватает на диалог, выпадающее меню, ряд аккордеона. Ничто внутри не знает и не заботится, к какому элементу ты прицепишь toggle, — и в этом весь смысл headless.

Prop-getter-ы — это апгрейд, делающий headless-хук эргономичным: они упаковывают подключение — onClick, aria-expanded, id, — так что вызывающий разворачивает один объект вместо того, чтобы помнить пять атрибутов. Getter — это функция, возвращающая пропсы, нужные элементу, и, что важно, она композирует собственные обработчики вызывающего, а не перезаписывает их.

function useDisclosure(initial = false) {
  const [isOpen, setOpen] = useState(initial);
  const toggle = useCallback(() => setOpen((v) => !v), []);
  const panelId = useId();

  const getButtonProps = useCallback(
    (props: React.ComponentProps<"button"> = {}) => ({
      ...props,
      "aria-expanded": isOpen,
      "aria-controls": panelId,
      onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
        props.onClick?.(e); // обработчик вызывающего срабатывает первым
        toggle();
      },
    }),
    [isOpen, panelId, toggle],
  );

  const getPanelProps = useCallback(
    (props: React.ComponentProps<"div"> = {}) => ({
      ...props,
      id: panelId,
      hidden: !isOpen,
    }),
    [isOpen, panelId],
  );

  return { isOpen, toggle, getButtonProps, getPanelProps };
}

Вызов props.onClick?.(e) перед toggle() — та деталь, что отделяет настоящий prop-getter от игрушечного: вызывающий может передать свой собственный onClick, и он всё равно сработает. Так headless-хук остаётся композируемым, а не захватывает элемент.

Вызывающий разворачивает getter-ы на свою собственную разметку — и разметка полностью свободна. В этом выигрыш над render-props: между хуком и твоим JSX не сидит компонент-обёртка, поэтому нет вложенности и нет раскладки, которую хук тебе навязывает. Тот же хук движет кнопку-с-панелью, <details> или полностью кастомный дизайн — меняются лишь цели разворота.

function FaqItem({ q, a }: { q: string; a: string }) {
  const { getButtonProps, getPanelProps } = useDisclosure();
  return (
    <section>
      <button {...getButtonProps({ className: "faq-trigger" })}>{q}</button>
      <div {...getPanelProps({ className: "faq-panel" })}>{a}</div>
    </section>
  );
}

Заметь getButtonProps({ className: "faq-trigger" }) — className вызывающего проходит насквозь, потому что getter разворачивает ...props первым. Подключение доступности (aria-expanded, aria-controls, id, hidden) берёт на себя хук; стилизация и структура — за вызывающим. Поведение и разметка, чисто разделённые.

Режим отказа номер один: хук, возвращающий JSX, — не headless-хук, это компонент, надевший префикс use, и он выбрасывает каждое преимущество. В тот миг, когда твой хук возвращает <div>…</div>, вызывающий больше не может выбрать элемент, стилизацию или структуру; ты вернулся к обёртке без всякой ясности компонента. Хочешь вернуть UI — напиши компонент. Хук возвращает данные и поведение — значения, обработчики, getter-ы, — никогда элементы.

// НЕВЕРНО: это компонент, притворяющийся хуком
function useDisclosure() {
  const [isOpen, setOpen] = useState(false);
  return <button onClick={() => setOpen((v) => !v)}>{isOpen ? "Hide" : "Show"}</button>;
  // вызывающий не может перестилизовать, выбрать элемент, композировать — headless-свобода потеряна
}

// ВЕРНО: возвращай поведение; рендерит вызывающий
function useDisclosure() {
  const [isOpen, setOpen] = useState(false);
  return { isOpen, toggle: () => setOpen((v) => !v) };
}

Если ловишь себя на том, что тянешься за JSX внутри хука, — это сигнал, что тебе всё это время был нужен компонент.