vercel-composition-patterns

To refactor React components and avoid boolean prop proliferation, replace multi-flag components with explicit variant components like ThreadComposer or EditMessageComposer. This approach uses dedicated providers and compound components to create more maintainable and reusable APIs.

The best way to manage shared state across React compound components is lifting state into context providers. This keeps UI subcomponents decoupled from state management, allowing them to access shared state through a common context rather than relying on prop drilling.

To update React context usage for React 19, modernize your APIs by replacing useContext with the use() hook and passing refs as regular props. This skill guides these modernization steps alongside establishing a generic context interface for state, actions, and meta.

You should use explicit variant components instead of boolean props when building scalable component libraries or refactoring large UIs. If a single component handles multiple distinct use cases like editing or forwarding messages, splitting it into dedicated variants prevents complex and unmanageable prop combinations.

Yes, you can reuse the same React UI components for different use cases without prop drilling by swapping context providers. Implement a Provider-based UI with a shared Composer context and subcomponents, then render the appropriate provider variant to instantly change the UI's behavior.