vercel-composition-patterns

Reduce boolean prop proliferation in React by replacing conditional rendering with explicit variant components, using compound components and shared context to separate concerns and flatten nested logic.

Build a scalable React UI library API by applying composition patterns: define explicit variants, use compound components for structural flexibility, and lift shared state into contextual providers to avoid brittle configurations.

Compound components share state in React by leveraging contextual providers, allowing parent and child components to communicate implicitly without passing props down manually through every layer of the component tree.

React 19 changes composition patterns by introducing the use() API for context consumption instead of useContext and removing the need for forwardRef in modern code, simplifying how components manage shared state and DOM references.

Refactor a React component by identifying boolean-driven conditional branches, extracting them into distinct variant components, and orchestrating them through a provider to share behavior and state cleanly.

Use composition patterns over conditional rendering when components accumulate multiple boolean props, suffer from brittle variant combinations, or require flexible reusable APIs that scale across different application contexts.