react-component-patterns

name	react-component-patterns
description	Modern React component architecture and composition patterns. Use when designing reusable React components, applying composition patterns, or structuring component hierarchies. (triggers: **/*.jsx, **/*.tsx, component, props, children, composition, hoc, render-props)

React Component Patterns

Priority: P0 (CRITICAL)

Standards for building scalable, maintainable React components.

Implementation Guidelines

• Architecture: Use Compound Components (e.g., <Select><Select.Option /></Select>) for complex state sharing within a UI unit. Use Higher-Order Components (HOC) for cross-cutting concerns (e.g., withAuth).
• Composition: Prefer Slots or Render Props (render={(data) => ...}) over deep prop hierarchies. Use children prop for layout-based composition.
• Components: Distinguish between Controlled (state from props) and Uncontrolled (local useRef state) components. Favor controlled for form validation.
• Props: Use Explicit TS interfaces. Avoid Prop Drilling by leveraging Context API or Zustand for global/deeply nested state.
• Boolean Props: Shorthand <Cmp isVisible /> vs isVisible={true}.
• Conditionals: Ternary (Cond ? <A/> : <B/>) over && for rendering consistency (prevents 0 rendering).
• Function Components: Only hooks. No classes. Small size (<250 lines). One component per file.
• Exports: Named exports only. PascalCase naming.

Anti-Patterns

• No Classes: Use hooks.
• No Prop Drilling: Use Context/Zustand.
• No Nested Definitions: Define components at top level.
• No Index Keys: Use stable IDs.
• No Inline Handlers: Define before return.

References

See references/patterns.md for Composition, Compound Components, and Render Props examples.