What is the compound component pattern?
Quick answer
A set of components that work together and share implicit state via context, giving a flexible declarative API like <Tabs><Tab/></Tabs>.
In detail
Compound components expose a parent and children that communicate through shared (usually context) state instead of a large prop list. This gives consumers a clean, composable API and keeps internal wiring hidden. Common in UI libraries: Tabs/Tab, Accordion/Item, Select/Option.
1<Tabs defaultValue="a">
2 <Tabs.List>
3 <Tabs.Trigger value="a">A</Tabs.Trigger>
4 <Tabs.Trigger value="b">B</Tabs.Trigger>
5 </Tabs.List>
6 <Tabs.Panel value="a">First</Tabs.Panel>
7</Tabs>Why interviewers ask this: A design-pattern question for component-library or senior roles.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399