vercel-composition-patterns

To avoid boolean prop proliferation in React components, refactor them into explicit variant components and compound components wired with shared context providers. This replaces complex boolean flags with modular, reusable APIs.

The best way to build a React component library with explicit variants is to create distinct components like ThreadComposer and EditMessageComposer. These explicit variants replace boolean flags and utilize a shared provider to wire UI pieces.

Provider-based architecture decouples state in React UI components by having UI components consume a generic context interface while state management lives inside providers. This separation supports multiple state implementations.

Yes, you can use the React 19 use() hook instead of useContext for composition patterns. The architecture enforces provider-based design with generic context interfaces and provides guidance for React 19 API usage, including refs as regular props.

To refactor an existing React UI to use compound components, replace boolean flags with explicit variant components wired by a single shared context provider. This migration path avoids prop drilling and creates modular APIs for React 18+.

You should not replace boolean flags with explicit variant components when the UI variations are minimal and do not justify the overhead of a provider-based architecture. Compound components are best for scaling complex component libraries with multiple state implementations.