vercel-composition-patterns

Refactor React components by replacing boolean flags with explicit variant components like ThreadComposer or EditMessageComposer. This composition pattern creates self-documenting APIs, preventing prop drilling and keeping component logic maintainable as your UI primitives scale.

The compound components pattern in React uses shared context to let flexible component assemblies manage state internally. Use it to minimize prop drilling and decouple UI focus from data logic, enabling robust and reusable component architectures.

Decouple state management from React UI by moving data and behavior into context providers. This approach keeps your UI components focused purely on presentation while providers handle state, resulting in a modular architecture.

Yes, React 19 introduces the use() hook to replace useContext for reading context providers. Adopting use() aligns your composition patterns with modern React APIs, alongside treating ref as a regular prop for cleaner component design.

Design scalable React UI library APIs by applying composition patterns like explicit variants and provider-based state management. This avoids boolean prop complexity, enabling flexible assembly and self-documenting code for reusable primitives.

Avoid boolean flags in React components when an API grows complex and requires multiple conditional behaviors. Replace them with explicit variant components to keep the code self-documenting, prevent prop drilling, and maintain a scalable architecture.