React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. Upstream: composition-patterns in vercel-labs/agent-skills.

Scope

• Applies to: reusable component APIs, compound components, explicit variants, React 19 ref/use() changes
• Does NOT cover: visual direction (frontend-design-v1); Next.js caching or RSC data fetching (next-v16, vercel-react-v1)

Assumptions

• React 19+ in typical Basilic apps; skip the React 19 rule section on React 18
• Server/client boundaries already exist; composition must not move server data into client-only providers

Principles

• Prefer composition over boolean configuration for reused components
• Lift client UI state only when siblings need it; keep server data on the server
• Extract shared primitives after a second call site, not for one-off route UI