vercel-composition-patterns

To refactor React components and eliminate boolean prop proliferation, replace a single component with many boolean modes by creating explicit variant components like ThreadComposer and EditComposer. This avoids impossible prop combinations and improves maintainability.

The best way to manage shared state without prop drilling is lifting state into a provider component. This provider-first design uses a shared context so sibling UI pieces can access state and actions directly through context providers.

React 19 context providers are consumed using the use() pattern instead of useContext. For component composition, define a generic context interface exposing state, actions, and meta to inject dependencies and allow flexible UI assembly.

You should replace render props with children-based composition to achieve safer React component composition. Structuring components with compound component architecture allows consumers to compose exactly what they need without complex render-prop logic.

You need compound components when your React UI requires a shared context for consumers to compose exactly what they need. This architecture pairs with provider-first state management to decouple state logic from UI rendering.

This React refactoring approach does not require external libraries or dependencies. It relies purely on React 19 features like the use() pattern and ref as a regular prop, alongside architectural patterns like context providers and state lifting.