vercel-composition-patterns

Avoid boolean prop proliferation in React by using compound components and context providers. These patterns decouple UI structure from conditional logic, keeping component architecture flexible and clean.

The best way to manage state is lifting it into context providers. This decouples state logic from UI components, allowing flexible composition without passing props deeply through the component tree.

Prefer using children over render props for React composition. This pattern simplifies the component API, avoids deeply nested callback functions, and improves overall codebase readability.

Create explicit React component variants by defining separate components for each state instead of using boolean props. This composition pattern prevents complex conditional rendering paths and improves maintainability.

Use compound components in React when a large component requires multiple conditional rendering paths or needs shared state. Lifting state into context providers allows the parts to communicate cleanly.