Component Composition & Compound Components

Component composition is the practice of combining small, focused React components together to build complex user interfaces. Pushing UI configuration into component children avoids 'prop drilling' (passing data through multiple intermediary components that do not need it).

The Compound Component pattern allows multiple components to share implicit state while giving callers complete freedom over rendering layout. Examples include <Select> with <Select.Option> or <Accordion> with <Accordion.Item>. Using React Context internally, parent compound components manage state while sub-components render seamlessly wherever children are placed.

Before

Prop-Drilled Monolithic Card

1// ❌ Monolithic component with dozens of configuration props2<Modal3  isOpen={isOpen}4  title="Edit Profile"5  bodyText="Update details"6  confirmText="Save"7  onConfirm={handleSave}8  showCloseIcon={true}9/>

After

Compound Component Composition API

1// ✅ Compound pattern: Callers control layout & composition freely2<Dialog open={isOpen} onOpenChange={setIsOpen}>3  <Dialog.Header>4    <Dialog.Title>Edit Profile</Dialog.Title>5  </Dialog.Header>6  <Dialog.Content>7    <ProfileForm />8  </Dialog.Content>9  <Dialog.Footer>10    <Button onClick={handleSave}>Save</Button>11  </Dialog.Footer>12</Dialog>

Exercise

Build a compound <Tabs> component (Tabs, Tabs.List, Tabs.Tab, Tabs.Panel) using React Context.

Check your understanding

What is the primary benefit of compound components over long prop lists?Show answerHide answer
Answer
Callers can customize layout, ordering, and markup without requiring new configuration props on the parent.
How do sub-components in a compound pattern share active state?Show answerHide answer
Answer
Via an internal React Context Provider rendered inside the parent component.