React Composition Patterns

When to Apply

• Refactoring components with many boolean props
• Building reusable component libraries
• Designing flexible component APIs
• Reviewing component architecture
• Working with compound components or context providers

Rule Categories by Priority

architecture-

state-

patterns-

react19-

Quick Reference

1. Component Architecture (HIGH)

• architecture-avoid-boolean-props

  - Don't add boolean props to customize behavior; use composition

• architecture-compound-components

  - Structure complex components with shared context

2. State Management (MEDIUM)

• state-decouple-implementation

  - Provider is the only place that knows how state is managed

• state-context-interface

  - Define generic interface with state, actions, meta for dependency injection

• state-lift-state

  - Move state into provider components for sibling access

3. Implementation Patterns (MEDIUM)

• patterns-explicit-variants

  - Create explicit variant components instead of boolean modes

• patterns-children-over-render-props

  - Use children for composition instead of renderX props

4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip this section if using React 18 or earlier.

• react19-no-forwardref

  - Don't use

  forwardRef

  ; use

  use()

  instead of

  useContext()

How to Use

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

• Brief explanation of why it matters
• Incorrect code example with explanation
• Correct code example with explanation
• Additional context and references

Full Compiled Document

AGENTS.md