1---
2title: Use Compound Components
3impact: HIGH
4impactDescription: enables flexible composition without prop drilling
5tags: composition, compound-components, architecture
6---
7 
8## Use Compound Components
9 
10Structure complex components as compound components with a shared context. Each
11subcomponent accesses shared state via context, not props. Consumers compose the
12pieces they need.
13 
14**Incorrect (monolithic component with render props):**
15 
16```tsx
17function Composer({
18  renderHeader,
19  renderFooter,
20  renderActions,
21  showAttachments,
22  showFormatting,
23  showEmojis,
24}: Props) {
25  return (
26    <form>
27      {renderHeader?.()}
28      <Input />
29      {showAttachments && <Attachments />}
30      {renderFooter ? (
31        renderFooter()
32      ) : (
33        <Footer>
34          {showFormatting && <Formatting />}
35          {showEmojis && <Emojis />}
36          {renderActions?.()}
37        </Footer>
38      )}
39    </form>
40  )
41}
42```
43 
44**Correct (compound components with shared context):**
45 
46```tsx
47const ComposerContext = createContext<ComposerContextValue | null>(null)
48 
49function ComposerProvider({ children, state, actions, meta }: ProviderProps) {
50  return (
51    <ComposerContext value={{ state, actions, meta }}>
52      {children}
53    </ComposerContext>
54  )
55}
56 
57function ComposerFrame({ children }: { children: React.ReactNode }) {
58  return <form>{children}</form>
59}
60 
61function ComposerInput() {
62  const {
63    state,
64    actions: { update },
65    meta: { inputRef },
66  } = use(ComposerContext)
67  return (
68    <TextInput
69      ref={inputRef}
70      value={state.input}
71      onChangeText={(text) => update((s) => ({ ...s, input: text }))}
72    />
73  )
74}
75 
76function ComposerSubmit() {
77  const {
78    actions: { submit },
79  } = use(ComposerContext)
80  return <Button onPress={submit}>Send</Button>
81}
82 
83// Export as compound component
84const Composer = {
85  Provider: ComposerProvider,
86  Frame: ComposerFrame,
87  Input: ComposerInput,
88  Submit: ComposerSubmit,
89  Header: ComposerHeader,
90  Footer: ComposerFooter,
91  Attachments: ComposerAttachments,
92  Formatting: ComposerFormatting,
93  Emojis: ComposerEmojis,
94}
95```
96 
97**Usage:**
98 
99```tsx
100<Composer.Provider state={state} actions={actions} meta={meta}>
101  <Composer.Frame>
102    <Composer.Header />
103    <Composer.Input />
104    <Composer.Footer>
105      <Composer.Formatting />
106      <Composer.Submit />
107    </Composer.Footer>
108  </Composer.Frame>
109</Composer.Provider>
110```
111 
112Consumers explicitly compose exactly what they need. No hidden conditionals. And the state, actions and meta are dependency-injected by a parent provider, allowing multiple usages of the same component structure.
113