compound-pattern

To build a dropdown menu with shared state, create a parent component that manages the menu's open state and expose child elements like Toggle, List, and Item as static properties. This allows the subcomponents to coordinate implicitly without prop drilling.

The compound pattern supports both React Context for safe state propagation and static property composition on the parent component. You can also use prop-augmentation via cloning for nested structures to achieve coordinated subcomponents.

You should avoid the compound pattern when your UI components do not require coordinated behavior or shared implicit state. If your component tree is simple enough that prop drilling is manageable, introducing context or static properties may add unnecessary complexity.

The best way to structure composite widgets like tabs is using the compound pattern to share implicit state. A parent component holds the active tab state, while child components are exposed as static properties to coordinate seamlessly without explicit prop passing.