vercel-composition-patterns

Refactor React components by replacing boolean props with compound components and explicit variants. This pattern uses children composition to separate conditional rendering logic, reducing prop explosion and making the component architecture easier to maintain.

Compound components are a React composition pattern where a parent component coordinates state with subcomponents. Use them to decouple shared state logic from UI, enabling flexible component composition without passing multiple props down the component tree.

Manage shared state in React by using context providers to decouple state logic from the UI. This strategy allows compound components to access shared data without prop drilling, enhancing code flexibility and maintainability.

Yes, the composition pattern approach works with React 19 APIs. It provides specific guidance on modern React practices including the `use()` hook and ref handling to ensure component architecture remains compatible with the latest framework updates.

The best way to structure scalable React component architecture is by preferring children composition over render props and using context providers for state management. This prevents boolean prop proliferation and creates explicit component variants.

You should avoid render props when children composition can achieve the same result. Preferring children composition over render props prevents callback nesting issues and maintains a cleaner, more readable component architecture.