Avoid boolean props

Each boolean doubles the states. Compose the variant you need instead.

From vercel-composition-patterns, rule avoid-boolean-props.

Every flag doubles the states

Add a use case. Compare what each approach must cover.

One Composer + flagsBad
4 prop combos1 impossible
2 flags → 2² = 4 states
Explicit composersGood
    3 components0 impossible
    n use cases → n components

    Impossible combos still render

    Turn on two flags at once. Then pick a variant.

    Flags decideBad
    one mode
    isEditing ? … : isForwarding ? … : …
    Variant decidesGood
    one variant, no guess
    <ThreadComposer />
    // Thread composer: adds "also send to channel"
function ThreadComposer({ channelId }: { channelId: string }) {
  return (
    <Composer.Frame>
      <Composer.Header />
      <Composer.Input />
      <AlsoSendToChannelField id={channelId} />
      <Composer.Footer>
        <Composer.Formatting />
        <Composer.Emojis />
        <Composer.Submit />
      </Composer.Footer>
    </Composer.Frame>
  )
}

// Edit composer: different footer actions
function EditComposer() {
  return (
    <Composer.Frame>
      <Composer.Input />
      <Composer.Footer>
        <Composer.Formatting />
        <Composer.Emojis />
        <Composer.CancelEdit />
        <Composer.SaveEdit />
      </Composer.Footer>
    </Composer.Frame>
  )
}

    Why it matters, pros and cons

    Why it matters

    n booleans allow 2ⁿ prop combinations. Most are impossible, yet all compile and must be guarded.

    Pros

    • Each variant says what it renders.
    • A new use case adds one component, not a doubling.
    • Shared parts stay shared through Composer.*.

    Cons

    • More components to name and export.
    • A true on/off like disabled is fine as a boolean.
    • Splitting a big monolith takes a real refactor.