Compound Components: Cooperative Child Patterns

In React’s default data flow, parent components pass props directly to their children. While this approach works for simple UIs, more complex widgets, such as tabs, menus, carousels, steppers, and accordions, require coordination between sibling components. Clicking a tab should reveal its corresponding panel. Selecting a menu item should close the menu. Advancing a stepper should update the active step across related UI elements. Coordinating these interactions through prop drilling or large configuration objects often leads to rigid designs, over-engineering, and brittle APIs that are hard to maintain as features evolve.

Building flexible UIs with compound components

The compound component pattern addresses these challenges by establishing a shared communication channel, typically implemented with React context, between a parent container and its specialized child components. The parent component owns the core state and exposes the functions used to update it. Child components consume the shared state and invoke updates in response to user interactions.

The key insight is that children do not communicate directly with each other. Instead, they subscribe to the parent’s context, which broadcasts the current state. This decoupling gives consumers complete freedom to rearrange the visual layout, placing triggers below content, grouping panels into custom sections, or re-theming the UI, without breaking the interaction model. The structural relationship in JSX becomes the configuration mechanism: the parent knows which children belong to the interactive group based solely on where they are rendered.

Decoupled state management with <Tabs>

The diagram above illustrates how <Tabs> manages the ...