composition-patterns

React Composition Patterns

Build components by composition, not configuration. As a component grows, the temptation is to add another boolean prop. Each one doubles the possible states and breeds conditional logic until the component is unmaintainable. Compose small pieces instead — explicit, self-documenting, and easy for both humans and agents to extend. Adapted from Vercel Engineering's composition-patterns (MIT).

When to use

• A component is accumulating boolean/mode props (isThread, isEditing, isDM, showFooter…) or deeply nested conditional rendering.
• Designing a reusable component or a component library API.
• Reviewing component architecture for flexibility and maintainability.

This governs how you design your own components; shadcn governs using its components, and react-performance governs runtime speed. They don't overlap.

1. Avoid boolean-prop proliferation (the core rule)

Don't customize behavior with boolean flags — each flag multiplies states and creates impossible combinations. Split into composed pieces instead.

// Avoid: every new mode adds a flag and a branch
<Composer isThread isEditing={false} channelId="abc" showFormatting />

// Prefer: explicit composition, no conditionals to reason about
<Composer.Frame>
  <Composer.Input />
  <AlsoSendToChannelField id={channelId} />
  <Composer.Footer>
    <Composer.Formatting />
    <Composer.Submit />
  </Composer.Footer>
</Composer.Frame>

2. Compound components with a shared context

Structure a complex component as a set of subcomponents that read shared state from context — not from props drilled through a monolithic parent. Consumers compose only the pieces they need.

const ComposerContext = createContext<ComposerContextValue | null>(null);

function ComposerInput() {
  const { state, actions, meta } = use(ComposerContext);
  return (
    <TextInput
      ref={meta.inputRef}
      value={state.input}
      onChangeText={(t) => actions.update((s) => ({ ...s, input: t }))}
    />
  );
}

// Export the pieces as one namespaced object
const Composer = {
  Provider: ComposerProvider,
  Frame: ComposerFrame,
  Input: ComposerInput,
  Footer: ComposerFooter,
  Submit: ComposerSubmit,
};