Compound components are a [React](/courses/reactjs) composition pattern where multiple components work together as parts of one larger UI component. A familiar [HTML](/courses/html) example is: ```html ``` `select` and `option` are separate elements, but they are designed to work together. [React](/courses/reactjs) compound components follow a similar idea. ### Example API Imagine a Tabs component: ```jsx Profile Settings Profile content Settings content ``` Instead of one giant component receiving many configuration props, the consumer composes related pieces naturally. ### Shared State with Context Compound components often use Context to share internal state. ```jsx import { createContext, useContext, useState } from "react"; const TabsContext = createContext(null); function Tabs({ children }) { const [activeTab, setActiveTab] = useState("profile"); return ( {children} ); } ``` A trigger can read that shared state: ```jsx function TabTrigger({ value, children }) { const { activeTab, setActiveTab } = useContext(TabsContext); return ( ); } ``` A panel can use the same state: ```jsx function TabPanel({ value, children }) { const { activeTab } = useContext(TabsContext); if (activeTab !== value) { return null; } return

{children}

; } ``` Conceptually: ```text Tabs ↓ owns shared activeTab ↓ Context ├── Trigger ├── Trigger ├── Panel └── Panel ``` ### Why Use Compound Components? They can create APIs that are both reusable and flexible. Instead of: ```jsx ``` you let the consumer compose the structure: ```jsx ... ``` ### Common Compound Component Examples This pattern works well for UI such as: ```text Tabs Accordion Dropdown Menu Select Modal Form field groups Carousel ``` ### Compound Components Hide Coordination Logic Consumers should not need to manually wire every piece together. The compound component can internally handle: ```text Current selection Open/closed state Shared IDs Keyboard behavior Context Accessibility relationships ``` while exposing a clear declarative API. ### Avoid Excessive Hidden Magic A compound API should still be understandable. If components only work when placed in undocumented positions or silently depend on many hidden assumptions, maintenance becomes difficult. ### Interview-Ready Answer Compound components are a composition pattern where several related React components cooperate to form one feature. A parent usually owns shared state and child components communicate through Context or another internal mechanism. The pattern is useful for flexible components such as tabs, accordions, menus, and selects because consumers can compose the structure instead of passing a large number of configuration props.