vercel-composition-patterns

Replace boolean props in React by applying composition patterns like explicit variants and compound components. This refactoring eliminates bloated conditionals and produces scalable, maintainable UIs with clear, reusable APIs.

The best way to avoid prop drilling with compound components is lifting state into context providers. This pattern allows flexible composition and shared access without passing props deeply through the component tree.

No, these React composition patterns follow React 19 API guidelines by using the use() hook over useContext and avoiding forwardRef. Generic context interfaces are defined to enable dependency injection for multiple state implementations.

Create explicit variants by refactoring generic components into specialized ones, such as ThreadComposer or EditMessageComposer. This reduces confusion and improves maintainability by replacing boolean flags with distinct, purpose-built components.

Use context providers over render props when you need to lift state into provider components for shared access across compound components. Generic context interfaces enable dependency injection, allowing UI components to work with multiple state implementations.