Components Composition Patterns

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

Rule Categories by Priority

References

Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).

• references/component-architecture.md — avoiding boolean-prop proliferation and structuring compound components with shared context · read when a component has accumulated boolean modes or you're designing a flexible multi-part component API.
• references/state-management.md — lifting state into providers, generic context interfaces for dependency injection, decoupling state from UI · read when sibling components need shared state, or you want the same UI to work across different state implementations.
• references/implementation-patterns.md — explicit variant components over boolean modes, and children over render props · read when choosing between variant components vs. props, or between children and renderX callbacks.
• references/react19-apis.md — ref as a regular prop (no forwardRef) and use() instead of useContext() · read when targeting React 19+ and refactoring refs or context usage.