vercel-composition-patterns

Refactor monolithic components into explicit variants like ThreadComposer and EditComposer to eliminate boolean prop proliferation, using compound components to compose smaller pieces and define their purpose clearly.

The compound components pattern builds scalable React components by composing specialized sub-components together rather than passing conditional props, creating flexible and maintainable component architecture.

Decouple state from UI by lifting state management into context providers, allowing state implementation to remain separate from component rendering logic to improve reusability.

Prefer children over render props for React composition patterns to create explicit component variants, avoiding complex conditional logic and simplifying component API design.

React 19 features like the use() hook and passing ref as a prop are supported patterns for building scalable components, offering modern ways to handle context within composition architectures.

Refactor monolithic React components when boolean prop proliferation makes code hard to maintain, splitting them into smaller composable components that explicitly define purpose and state boundaries.