react-composition-patterns

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals.

---

1. Avoid Boolean Prop Proliferation

Impact: CRITICAL - Prevents unmaintainable component variants

Don't add boolean props like isThread, isEditing, isDMThread to customize behavior. Each boolean doubles possible states and creates unmaintainable conditional logic.

Incorrect: boolean props create exponential complexity

function Composer({
  onSubmit,
  isThread,
  channelId,
  isDMThread,
  dmId,
  isEditing,
  isForwarding,
}: Props) {
  return (
    <div className="composer">
      <Input />
      {isDMThread ? (
        <DMThreadHeader dmId={dmId} />
      ) : isThread ? (
        <ThreadHeader channelId={channelId} />
      ) : null}
      {isEditing ? (
        <EditActions />
      ) : isForwarding ? (
        <ForwardActions />
      ) : (
        <SendActions onSubmit={onSubmit} />
      )}
    </div>
  )
}

Correct: composition eliminates conditionals

// Channel composer
function ChannelComposer() {
  return (
    <ComposerProvider>
      <ComposerFrame>
        <ComposerInput />
        <ComposerFooter>
          <FormattingTools />
          <EmojiPicker />
          <SendButton />
        </ComposerFooter>
      </ComposerFrame>
    </ComposerProvider>
  )
}

// Thread composer - adds "also send to channel" field
function ThreadComposer({ channelId }: { channelId: string }) {
  return (
    <ThreadProvider channelId={channelId}>
      <ComposerFrame>
        <ComposerInput />
        <AlsoSendToChannel />
        <ComposerFooter>
          <FormattingTools />
          <SendButton />
        </ComposerFooter>
      </ComposerFrame>
    </ThreadProvider>
  )
}

// Edit composer - different footer actions
function EditComposer() {
  return (
    <EditProvider>
      <ComposerFrame>
        <ComposerInput />
        <ComposerFooter>
          <CancelButton />
          <SaveButton />
        </ComposerFooter>
      </ComposerFrame>
    </EditProvider>
  )
}