Name explicit variants

The call site should tell you what renders, without reading the body.

From vercel-composition-patterns, rule explicit-variants.

What does this render?

Press Trace. Count the lines you read to answer.

Mode propsBad
<Composer isThread isEditing={false} channelId="abc" showAttachments showFormatting={false} />
0 lines read0 branches
one body, every mode
Named variantGood
<ThreadComposer channelId="abc" />
0 lines read0 branches
one body, one mode

// Immediately clear what each renders
<ThreadComposer channelId="abc" />
<EditMessageComposer messageId="xyz" />
<ForwardMessageComposer messageId="123" />

function ThreadComposer({ channelId }: { channelId: string }) {
  return (
    <ThreadProvider channelId={channelId}>
      <Composer.Frame>
        <Composer.Input />
        <AlsoSendToChannelField channelId={channelId} />
        <Composer.Footer>
          <Composer.Formatting />
          <Composer.Emojis />
          <Composer.Submit />
        </Composer.Footer>
      </Composer.Frame>
    </ThreadProvider>
  )
}

One change, how much to retest

Pick a change. Lit cells are what it can affect.

Edit the monolithBad
8 prop combos to retest
Edit one variantGood
    1 variant to retest

    Why it matters, pros and cons

    Why it matters

    A variant's name and body say exactly what renders. No flags to trace, no combos to guard.

    Pros

    • Readable at the call site.
    • A change stays inside one variant.
    • Each variant picks its own provider and actions.

    Cons

    • Some JSX repeats across variants.
    • Too many names if variants differ by one icon.
    • Needs shared Composer.* parts first.