vercel-composition-patterns

Refactor React components to avoid boolean prop proliferation by restructuring complex UI into explicit variants and compound components using children-based composition. This replaces rigid APIs with clearer, maintainable component contracts.

Manage shared state between sibling UI components by lifting it into provider components. Siblings can then read and act on the shared state through context-backed contracts without awkward workarounds or prop drilling.

Compound components improve React API design by replacing render props and boolean flags with explicit children-based composition. This makes available UI states obvious, easier to extend, and simpler to review.

Yes, you can use React 19 context patterns for state management. The approach applies updated patterns for refs and context usage, including React 19-compatible use() patterns when modern APIs are appropriate.

Replace render props with composition when designing compound component libraries or reviewing architecture for provider-driven state. This eliminates brittle component APIs and hidden conditionals, making reusable variants easier to maintain.

Prop drilling makes React component architecture brittle by relying on many boolean props and hidden conditionals. Moving to composition-first designs with shared context contracts eliminates this rigidity and improves reusability.