Compound Components — React Deep Dive

<select>/<option> in React: the compound pattern

In HTML, <select> and <option> cooperate with zero props between them — the select owns the state, each option reflects it. React gives you no built-in pairing, so you build one: a parent component holds the state and publishes it through a Context; related sub-components (attached as static properties, Tabs.Tab, Tabs.TabPanel) read it with useContext. The consumer writes <Tabs><Tabs.Tab/></Tabs> and never passes a state prop — exactly the clean ergonomics of <select>.

piece	role	analogy
`Context`	the shared channel, created once via `createContext`	the invisible air between `<select>` and `<option>` that carries state
Parent (`Tabs`)	holds state + wraps children in the `Provider`	the `<select>` element — it alone owns open/selected
Static assignment (`Tabs.Tab =`)	attaches sub-components as properties of the parent	how the DOM "knows" `<option>` belongs to `<select>`
Child consumer (`useContext`)	reads the shared state — no props passed in	the `<option>` reflecting "selected" without being told

1 · the compound Tabs you write (edit me)

var TabsContext = React.createContext({});

function Tabs(props) {
  var activeState = React.useState(props.defaultActive || 0);
  var active = activeState[0];
  var setActive = activeState[1];
  var ctx = React.useMemo(function () {
    return { active: active, setActive: setActive };
  }, [active]);
  return React.createElement(TabsContext.Provider, { value: ctx },
    React.createElement('div', { className: 'border border-[#30363d] rounded-lg overflow-hidden' }, props.children)
  );
}

Tabs.TabList = function TabList(props) {
  return React.createElement('div', {
    className: 'flex border-b border-[#30363d] bg-[#0d1117]',
    'data-testid': 'tablist'
  }, props.children);
};

Tabs.Tab = function Tab(props) {
  var ctx = React.useContext(TabsContext);
  var isActive = ctx.active === props.index;
  return React.createElement('button', {
    'data-testid': 'tab-' + props.index,
    'data-active': isActive ? 'true' : 'false',
    onClick: function () { ctx.setActive(props.index); },
    className: 'px-4 py-2 text-sm font-bold ' + (isActive ? 'text-[#61dafb] border-b-2 border-[#61dafb]' : 'text-[#8b949e]')
  }, props.children);
};

Tabs.TabPanel = function TabPanel(props) {
  var ctx = React.useContext(TabsContext);
  if (ctx.active !== props.index) return null;
  return React.createElement('div', {
    'data-testid': 'panel-' + props.index,
    className: 'p-4 bg-[#0d1117] text-sm'
  }, props.children);
};

// Usage — clean, NO state props threaded down!
function CompoundDemo() {
  return (
    <Tabs defaultActive={0}>
      <Tabs.TabList>
        <Tabs.Tab index={0}>Overview</Tabs.Tab>
        <Tabs.Tab index={1}>Details</Tabs.Tab>
        <Tabs.Tab index={2}>Reviews</Tabs.Tab>
      </Tabs.TabList>
      <Tabs.TabPanel index={0}>
        <p data-testid="content">Overview content — the starting tab</p>
      </Tabs.TabPanel>
      <Tabs.TabPanel index={1}>
        <p data-testid="content">Details content — click to see</p>
      </Tabs.TabPanel>
      <Tabs.TabPanel index={2}>
        <p data-testid="content">Reviews content — click to see</p>
      </Tabs.TabPanel>
    </Tabs>
  );
}

createRoot(document.getElementById('root')).render(<CompoundDemo/>);

2 · Babel compiles JSX → element tree

<Tabs.Tab index={0}> becomes React.createElement(Tabs.Tab, {"{index:0}"}) — the member expression resolves to the statically-attached function. Each click calls ctx.setActive, the Provider republishes, and every consumer re-renders with the new value.

// (hit "compile & render" to see Babel's output)

3 · live React (implicit state, proven)

Click a tab heading — no props are passed between Tabs and Tabs.Tab; the active index flows through Context. The gold-check drives this automatically: assert tab-0 active, click tab-1 → tab-2 → tab-0, asserting the right panel mounts and the active flag moves each time.

active tab: — · gold: tab-0 → click 1 → click 2 → click 0, panel + data-active match each step

intent → pattern

intent	pattern	why
share state implicitly	`var Ctx = createContext({})` + `Provider` in parent	avoids prop-drilling through N intermediate levels
attach a sub-component	`Tabs.Tab = function (props) {"{...}"}`	static property → consumer writes `Tabs.Tab`, clean namespaced API
read the shared state	`var ctx = useContext(Ctx)` inside a child	no props passed; child stays decoupled from parent internals
conditionally mount a panel	`if (ctx.active !== index) return null`	only the active panel is in the tree — lazy-friendly
keep the context value stable	`useMemo(() ={"("} {"{active, setActive}"} {")"}, [active])`	prevents every consumer re-rendering on unrelated parent renders