vercel-composition-patterns

To refactor React components, replace boolean props by creating explicit variant components like ThreadComposer and EditMessageComposer that compose shared UI parts. This approach uses compound components to scale your UI architecture without prop proliferation.

The provider pattern uses a generic context interface split into state, actions, and meta. This structure separates UI from state management, allowing you to swap implementations without editing the UI components themselves.

Use compound components when you need a scalable React UI library with clear separation between UI and state management. They work with render props and context to build reusable, scalable architectures while avoiding boolean prop proliferation.

Separate UI from state management by applying a provider-driven context interface divided into state, actions, and meta. This pattern lets you swap state implementations without modifying the UI, using explicit variant components for clear composition.

Boolean props cause scaling issues by creating complex combinations of conditional UI logic that are hard to maintain. Replacing them with explicit variants and compound components ensures shared UI parts compose predictably without conflicting states.