Общее состояние через контекст компонента

Проброс пропсов ломает compound-компоненты: детей можно вложить произвольно, поэтому пропсы до них не дотянутся. Разметку составляет потребитель, а значит ты не контролируешь, где в дереве сидят Tab и Panel. Любой подход, продевающий activeId через пропсы, предполагает фиксированную форму, которой у тебя нет.

// что пишет потребитель — обрати внимание на обёртку div, которую поставил не ты
<Tabs defaultId="a">
  <div className="tab-row">
    <Tab id="a">Account</Tab>
    <Tab id="b">Billing</Tab>
  </div>
  <Panel id="a">…</Panel>
  <Panel id="b">…</Panel>
</Tabs>

Tabs не может передать проп в <Tab id="a"> — между ними <div>, который Tabs не рендерит. Пропсы идут на один уровень; активное состояние должно дойти до произвольной глубины.

Создай контекст внутри модуля компонента — это приватный канал, который делят sub-компоненты. Вызов createContext живёт рядом с компонентом, а не в каком-то общеприложенческом файле провайдеров. Ничто извне этого модуля его не импортирует. В этой приватности весь смысл: потребитель составляет Tabs и никогда не знает, что контекст существует.

"use client"; // контекст + состояние, поэтому это поддерево — Client Component
import { createContext, useContext, useId, useState, useMemo } from "react";

interface TabsCtx { activeId: string; setActiveId: (id: string) => void; }
// не экспортируется — приватен для этого модуля
const TabsContext = createContext<TabsCtx | null>(null);

// один внутренний хук, который вызывают sub-компоненты; он же требует "должно быть внутри <Tabs>"
function useTabs() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error("Tab/Panel must be used inside <Tabs>");
  return ctx;
}

TabsContext и useTabs локальны для файла. Ошибка в useTabs превращает неверное использование (<Tab> отрендерен вне <Tabs>) в понятное сообщение вместо запутывающего null.

Родитель владеет состоянием и предоставляет его; sub-компоненты читают активное значение без переданных им пропсов. Tabs держит activeId в useState, оборачивает свои children в провайдер, и каждый Tab/Panel вызывает useTabs(), чтобы получить текущее значение, — независимо от того, насколько глубоко он в разметке потребителя.

export function Tabs({ children, defaultId }: { children: React.ReactNode; defaultId: string }) {
  const [activeId, setActiveId] = useState(defaultId);
  const value = useMemo(() => ({ activeId, setActiveId }), [activeId]);
  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;
}

export function Tab({ id, children }: { id: string; children: React.ReactNode }) {
  const { activeId, setActiveId } = useTabs();
  return (
    <button role="tab" aria-selected={activeId === id} onClick={() => setActiveId(id)}>
      {children}
    </button>
  );
}

export function Panel({ id, children }: { id: string; children: React.ReactNode }) {
  const { activeId } = useTabs();
  return activeId === id ? <div role="tabpanel">{children}</div> : null;
}

В JSX потребителя не появляется ни одного пропа activeId. Состояние течёт через контекст, поэтому разметка остаётся плоской, а дети — перемещаемыми.

Режим отказа первый: утечка контекста на всё приложение. Режим отказа второй: нестабильный value, перерисовывающий каждого потребителя на любое изменение. Это два способа деградации паттерна, и оба — про то, чем является контекст, а не что он делает.

Утечка: если ты экспортируешь TabsContext и предоставляешь его из верхнеуровневого провайдера приложения, чтобы «что угодно могло читать активную вкладку», ты превратил деталь, ограниченную компонентом, в глобальное состояние. Теперь два Tabs на одной странице делят один активный id, несвязанный код сцепляется с твоими внутренностями, а инкапсуляция, сделавшая паттерн эргономичным, исчезла.

Идентичность: потребители контекста перерисовываются всякий раз, когда value провайдера — это новая ссылка, а не когда меняются данные внутри. Свежий объектный литерал на каждый рендер — всегда новая ссылка.

// БАГ: новый объект на каждый рендер → каждый Tab и Panel перерисовывается на ЛЮБОЙ рендер родителя,
// даже на рендеры, не менявшие activeId
return <TabsContext.Provider value={{ activeId, setActiveId }}>{children}</TabsContext.Provider>;

// ИСПРАВЛЕНИЕ: мемоизируй, чтобы ссылка была стабильной, пока activeId реально не изменится
const value = useMemo(() => ({ activeId, setActiveId }), [activeId]);

setActiveId из useState уже стабилен, поэтому единственная реальная зависимость — activeId. С useMemo переключение вкладок перерисовывает только то, что зависит от изменения, а не всё поддерево на каждый несвязанный рендер.