vercel-composition-patterns

To refactor a React component with many boolean props, break it into explicit variants and use compound components to avoid prop proliferation. This pattern creates smaller, composable components that are easier to manage and extend.

The compound components pattern in React is an architecture technique that composes multiple smaller components together instead of passing many conditional props. It decouples state from UI by lifting it into providers, improving code organization.

The React 19 use() hook changes state management by allowing components to read resources like promises or context directly during render. Combined with explicit component variants and generic context interfaces, it simplifies decoupling state from UI.

You should use compound components instead of render props in React when you want to avoid prop proliferation and improve maintainability. Preferring composing children over render props creates explicit variants and a more scalable component architecture.

Yes, you can decouple state from UI in large React components by defining generic context interfaces and lifting state into providers. This state management strategy prevents monolithic components and ensures scalable React composition.

Explicit component variants in React are separate, purpose-built components created instead of using boolean props to conditionally render UI. Avoiding boolean prop proliferation prevents complex conditional logic and makes component architecture easier to extend.