Паттерны композиции: compound-компоненты вместо булевых пропсов

Спектр «конфигурация — композиция»

Каждый API компонента живёт на спектре. На одном конце — конфигурация: вызывающий передаёт пропсы, компонент владеет всей структурой. На другом — композиция: вызывающий передаёт JSX, компонент владеет только рамкой вокруг него. Конфигурация закрыта и перечислима — variant="primary" | "ghost" | "danger" — типизированный конечный контракт, который можно исчерпывающе протестировать и задокументировать. Композиция открыта — children принимает что угодно, и в этом весь смысл.

Провал конфигурации — взрыв булевых пропсов. Каждый булев is*/has* удваивает пространство состояний компонента: 9 булевых — это 2⁹ = 512 комбинаций, и взаимодействия между ними (loading × iconOnly, quiet × destructive) — реальные состояния рендера, которые тесты почти наверняка пропускают. Хуже того, булев проп — дорога в один конец: удаление ломает каждого потребителя, поэтому матрица только растёт. Надёжный запах — проп, описывающий содержимое, а не поведение: leftIcon, subtitle, footerActions, loadingText. Содержимое принадлежит вызывающему; в момент, когда вы добавляете проп ради инъекции разметки, API просит children или слот:

// Третий год жизни Button. Каждый проп — чей-то дедлайн.
<Button
  variant="primary" size="md" loading loadingText="Saving…"
  leftIcon={<SaveIcon />} fullWidth uppercase tooltip="Save the draft"
/>

// Композиция: те же потребности, ноль новых пропсов Button.
<Button variant="primary" size="md" disabled={saving}>
  {saving ? <Spinner label="Saving…" /> : <SaveIcon />}
  Save draft
</Button>

Правило, которое применяют senior-ревьюеры: перечислимая, ограниченная вариативность остаётся пропсом (это решение, которым владеет система — variant, size, tone); произвольная структура становится children или слотом (это контент вызывающего, и система не должна его перечислять).

Compound-компоненты: семейство, связанное контекстом

Когда несколько частей должны делить состояние — Tabs с триггерами и панелями, Select с опциями, Accordion с элементами — композиционный ответ называется compound-компонент: семейство компонентов, общающихся через неявный React-контекст, так что вызывающий свободно компонует части, а семейство координируется за кулисами. Форма, к которой сходится каждая серьёзная система:

const TabsCtx = createContext<TabsContextValue | null>(null);

function useTabs(part: string) {
  const ctx = useContext(TabsCtx);
  if (ctx === null) {
    // Падаем громко в development — ровно в точке неправильного использования.
    throw new Error(part + " must be rendered inside <Tabs>");
  }
  return ctx;
}

export function Tabs({ value, defaultValue, onValueChange, children }: TabsProps) {
  const [internal, setInternal] = useState(defaultValue ?? null);
  const isControlled = value !== undefined;
  const active = isControlled ? value : internal;

  const select = useCallback((next: string) => {
    if (!isControlled) setInternal(next); // uncontrolled: владеем состоянием сами
    onValueChange?.(next);                // controlled: решает родитель
  }, [isControlled, onValueChange]);

  const ctx = useMemo(() => ({ active, select }), [active, select]);
  return <TabsCtx.Provider value={ctx}>{children}</TabsCtx.Provider>;
}

Tabs.Trigger = function Trigger({ value, children }: TriggerProps) {
  const { active, select } = useTabs("<Tabs.Trigger>");
  return (
    <button role="tab" aria-selected={active === value} onClick={() => select(value)}>
      {children}
    </button>
  );
};

Три несущие детали. Первая: дефолт контекста — null, и useTabs на нём бросает исключение — Tabs.Panel, вставленный вне Tabs, падает в точке ошибки с именованным сообщением, вместо сломанного UI или краха на чтении undefined тремя слоями глубже. Вторая: дуальность controlled/uncontrolled — компонент поддерживает и value (состоянием владеет родитель, компонент лишь сообщает намерение через onValueChange), и defaultValue (компонент владеет состоянием сам). isControlled определяется как value !== undefined и должен оставаться неизменным всю жизнь экземпляра — полу-контролируемый компонент, который обновляет внутреннее состояние и читает value, визуально рассинхронизируется, как только родитель пропустит обновление. Третья: значение контекста мемоизировано — каждый потребитель TabsCtx ререндерится при смене идентичности значения, и инлайновый объект здесь перерисовывал бы каждый триггер и панель на каждом рендере Tabs.

Слоты против инспекции children

Есть и более старый способ связать семейство: перебрать children, найти свои части по типу элемента и вживить пропсы через cloneElement. Читается остроумно, а на деле — ловушка:

// Инспекция children привязывает родителя к точному дереву элементов.
function Tabs({ children }) {
  return Children.map(children, (child, i) =>
    isValidElement(child) && child.type === Tab
      ? cloneElement(child, { index: i })
      : child // фрагмент, обёртка FeatureFlag, кастомный Tab — молча пропущены
  );
}

Children.map видит непосредственный слой элементов, не глубже. Оберните Tab во фрагмент — и фрагмент окажется одним непрозрачным ребёнком; вкладки внутри невидимы. Оберните в компонент FeatureFlag — и child.type будет FeatureFlag, а не Tab: сопоставление провалится, индекс не придёт. Вынесите две вкладки в локальный компонент BillingTabs — та же тихая поломка, потому что того, что компонент отрендерит, не существует до рендера. Каждый из этих случаев — нормальный, поощряемый рефакторинг, и инспекция children наказывает их все. Поэтому react.dev держит API Children в разделе legacy, и поэтому победили compound-семейства на контексте: контекст достаёт до любого потомка на любой глубине, сквозь любую обёртку, без предположений о форме дерева. А для фиксированных областей, где нужна явная структура — иконка, набор действий — честный инструмент это именованный слот: обычный проп типа ReactNode (icon={<Save />}, actions={...}), перечислимый как конфигурация и открытый как композиция.

Где render props всё ещё побеждают

Хуки заменили render props для шаринга логики, но одна ниша структурно их: компонент владеет циклом по данным, а приложение владеет разметкой каждого элемента. Виртуализированный список решает, какие строки существуют, измеряет и позиционирует их — только он знает данные строки и стиль абсолютного позиционирования для каждого видимого индекса. Он обязан вернуть и то и другое вызывающему, на каждую строку, и функция-ребёнок — единственный канал такой формы:

<VirtualList items={rows} rowHeight={32}>
  {(row, style) => (
    <div style={style} className="row">
      {row.symbol} · {row.qty}
    </div>
  )}
</VirtualList>

Обычные children так не могут — children создаются вызывающим до того, как список что-либо узнал. Тест — направление потока данных: когда родитель производит данные на каждый вызов, нужные вызывающему, — render prop; когда контент производит вызывающий — children; когда части делят состояние — compound-семейство. TanStack Virtual и Table, downshift и каждый серьёзный data-grid живут в этой нише намеренно.