vercel-composition-patterns

Refactor React components with boolean prop proliferation by splitting them into compound components backed by shared interfaces and centralized state ownership. This architecture reduces coupling and makes component APIs predictable and easier to reuse across your codebase.

Manage shared state in compound components by centralizing it in provider-like parent components. Expose clean, injectable interfaces to children, decoupling internal state management from rendering logic to improve clarity and scalability.

Design scalable React component APIs by preferring explicit variants and children-based composition over render props. This approach eliminates tightly coupled internals, making your reusable component library easier to consume and reason about.

When targeting React 19+, you should avoid forwardRef and use the use() hook where applicable for component composition. Applying these modern API considerations ensures your state interfaces and architecture align with current React patterns.

Tightly coupled component logic makes React maintenance error-prone because internal dependencies and boolean props create unpredictable side effects. Redesigning these components with composition primitives decouples state, improving reuse and reducing runtime errors.

While you can use render props, children-based composition is strongly preferred for predictable component APIs. Render prop patterns increase API complexity, whereas explicit variants and children simplify state management and consumption.