Compound Components: Build Flexible APIs via Shared State
Think of HTML's <select> and <option>. The Compound Component pattern lets a parent manage state while children act as declarative configuration. It's used for flexible UI like tabs or accordions.
Why it exists
To avoid "prop explosion." As a component grows more complex, managing every variation through props becomes unwieldy and inflexible. The Compound Component pattern provides a clean, declarative API for complex UI by breaking a single monolithic component into a family of cooperating components.
The mental model
Think of native HTML's <select> and <option> tags. The parent <select> manages the state—which option is selected, its value—while the child <option> tags simply declare the available choices. They work together seamlessly without you having to manually wire state between them. This pattern brings that same declarative power to your own React components.
How it works
The parent component creates and manages the shared logic and state. It then uses React's Context API to pass that state and any helper functions down to its descendants. The child components consume this context to read the state or call functions to update it. This creates an implicit link, allowing the components to coordinate their behavior even though the developer using them just nests them in JSX.
When to use it
Reach for this pattern when building UI that needs to be highly flexible and composable, like custom tabs, accordions, or menus. It's perfect for component libraries where you want to give users maximum control over structure and rendering while abstracting away the state management. It keeps your component API clean and avoids a long list of configuration props.
When not to use it
This pattern is overkill for simple components that don't require much composition. If a component's variations can be handled with a few simple props, stick with that. Also, avoid this pattern if the child components need to function independently, as they are inherently coupled to their parent via context.
One canonical example
A custom <Tabs> system. A top-level <Tabs> component manages the activeTab state. It renders a <TabList> for the buttons and a <TabPanels> for the content. Inside, <Tab> and <TabPanel> components use the shared context to know whether they are active and how to change the active state. The user simply writes <Tabs><TabList><Tab>...</Tab></TabList><TabPanels><TabPanel>...</TabPanel></TabPanels></Tabs> and it just works.
Interview question
What is the primary benefit of using the Compound Component pattern in React?
- a.It allows child components to manage their own independent state without parent interference.
- b.It provides a declarative API for complex UI, where a parent manages shared state for its nested children.Correct
- c.It optimizes component rendering performance by reducing the number of props passed down the tree.
- d.It simplifies prop passing for simple components by using a global state solution.
Why? this is the answer
The Compound Component pattern's main advantage is offering a clean, declarative API for complex UI by centralizing shared state and logic in a parent, which its children then consume. Option A is incorrect because children in this pattern are coupled to the parent's state via context, not independent.
Just read this? Test yourself on what you have been reading.
Read the original → epicreact.dev
- #react
- #design patterns
- #components
- #frontend
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles