1---
2title: Avoid Boolean Prop Proliferation
3impact: CRITICAL
4impactDescription: prevents unmaintainable component variants
5tags: composition, props, architecture
6---
7 
8## Avoid Boolean Prop Proliferation
9 
10Don't add boolean props like `isThread`, `isEditing`, `isDMThread` to customize
11component behavior. Each boolean doubles possible states and creates
12unmaintainable conditional logic. Use composition instead.
13 
14**Incorrect (boolean props create exponential complexity):**
15 
16```tsx
17function Composer({
18  onSubmit,
19  isThread,
20  channelId,
21  isDMThread,
22  dmId,
23  isEditing,
24  isForwarding,
25}: Props) {
26  return (
27    <form>
28      <Header />
29      <Input />
30      {isDMThread ? (
31        <AlsoSendToDMField id={dmId} />
32      ) : isThread ? (
33        <AlsoSendToChannelField id={channelId} />
34      ) : null}
35      {isEditing ? (
36        <EditActions />
37      ) : isForwarding ? (
38        <ForwardActions />
39      ) : (
40        <DefaultActions />
41      )}
42      <Footer onSubmit={onSubmit} />
43    </form>
44  )
45}
46```
47 
48**Correct (composition eliminates conditionals):**
49 
50```tsx
51// Channel composer
52function ChannelComposer() {
53  return (
54    <Composer.Frame>
55      <Composer.Header />
56      <Composer.Input />
57      <Composer.Footer>
58        <Composer.Attachments />
59        <Composer.Formatting />
60        <Composer.Emojis />
61        <Composer.Submit />
62      </Composer.Footer>
63    </Composer.Frame>
64  )
65}
66 
67// Thread composer - adds "also send to channel" field
68function ThreadComposer({ channelId }: { channelId: string }) {
69  return (
70    <Composer.Frame>
71      <Composer.Header />
72      <Composer.Input />
73      <AlsoSendToChannelField id={channelId} />
74      <Composer.Footer>
75        <Composer.Formatting />
76        <Composer.Emojis />
77        <Composer.Submit />
78      </Composer.Footer>
79    </Composer.Frame>
80  )
81}
82 
83// Edit composer - different footer actions
84function EditComposer() {
85  return (
86    <Composer.Frame>
87      <Composer.Input />
88      <Composer.Footer>
89        <Composer.Formatting />
90        <Composer.Emojis />
91        <Composer.CancelEdit />
92        <Composer.SaveEdit />
93      </Composer.Footer>
94    </Composer.Frame>
95  )
96}
97```
98 
99Each variant is explicit about what it renders. We can share internals without
100sharing a single monolithic parent.
101