React Composition Patterns

Concept of the skill

This skill is the discipline of growing a React component's API by composition instead of by accumulating boolean flags. Its central move is the boolean state-explosion audit: before any prop is added, you count how many booleans a component already has, how many combined states that produces (2ⁿ), and how many of those combinations are impossible, unsupported, or contradictory — because the answer almost always reveals that the component's real shape is a small set of named valid variants, not the cartesian product of its flags. From that audit follow the patterns that scale: compound components (a family like Tabs.List / Tabs.Tab / Tabs.Panel that share state through a context provider rather than through prop drilling), explicit variant components (named modes instead of flag combinations), children-over-render-props (composing structure through children rather than renderX callbacks), and the provider state/actions/meta interface (one place owns the canonical state, the actions that mutate it, and the derived meta, decoupling consumers from how state is managed). The skill also carries the React 19 API migration — ref as a regular prop instead of forwardRef, and use() in place of useContext(). The throughline is restraint enforced by measurement: provider boundaries matter more than visual nesting, and a boolean prop is a cost to be justified against the audit, never a default reflex.

Coverage

React component composition patterns that prevent boolean prop proliferation: compound components (shared-context child families), explicit variant components, children-over-render-props, the context provider state/actions/meta interface, the boolean state explosion audit, and the React 19 API migration (ref as a regular prop instead of forwardRef, use() over useContext()). Covers the refactor playbook from flag inventory through impossible-state deletion and variant extraction to provider-based composition.

The rule categories, in priority order:

1. Component Architecture (HIGH)