vercel-composition-patterns

Refactor React components by replacing boolean props with explicit variant components and lifting shared state into context providers. This pattern exposes a generic state, actions, and meta interface to keep the UI implementation-agnostic and eliminate complex conditional logic.

The compound components pattern structures a UI element as composable pieces sharing a single context. Consumers assemble only the pieces they need, which creates clearer component APIs and avoids tightly coupled state management found in monolithic components.

Adapt React context for React 19 by replacing the useContext hook with the new use API and treating ref as a regular prop. These API changes streamline context consumption and simplify ref forwarding in compound component architectures.

Use a state provider instead of render props when lifting state out of tightly coupled components. Providers expose a generic state, actions, and meta interface so the UI remains implementation-agnostic, whereas render props often create deeply nested callback structures.

Yes, you can apply these composition patterns during React code reviews to identify and eliminate complex conditional logic. Reviewing for boolean prop proliferation and tightly coupled state helps enforce explicit variants and maintainable component APIs.