What problem does it solve?
It prevents React component designs from becoming brittle by reducing boolean-prop proliferation, rigid “mode” switches, and tangled state managed through props.
Core Features & Use Cases
- Replace boolean props with composable children to make intent explicit and reduce combinatorial UI states.
- Build compound components with shared context to avoid prop drilling and enable consistent “subcomponent” APIs.
- Create explicit variant components so each mode has a focused, valid set of props and avoids impossible states.
- Use children over render props for cleaner composition, reserving render props for advanced cases.
- Decouple state implementation from UI so providers can swap local state, API-backed state, or other implementations without changing consumers.
- Lift shared state into provider components to coordinate sibling components without callback/threading complexity.
- Apply composition-friendly patterns like polymorphic
as props, React 19 ref handling, slot patterns, and headless components.
Quick Start
Use the react-composition-2026 skill to refactor a prop-heavy component by rewriting it into a composable API with compound subcomponents and lifted state.
