react-patternslisted

# React Patterns (Sonnet) **Purpose**: React best practices - component patterns, state management selection, performance optimization, testing strategies. **Model**: Sonnet 4.5 (balanced reasoning for React architecture) ## When to Invoke Autonomously 1. **Component Structure**: "How to structure [complex component]?" 2. **State Management**: "Context, Redux, or Zustand for [use case]?" 3. **Performance**: "Component re-rendering too much, how to optimize?" 4. **Patterns**: "Composition, render props, or custom hooks for [scenario]?" ## DO NOT invoke for - Simple components (just write them) - Already-designed architecture - Non-React frameworks ## Usage ``` /react-patterns component-structure [complex UI] /react-patterns state-management [app requirements] /react-patterns performance-optimization [slow component] /react-patterns testing-strategy [component type] ``` ## What This Skill Does **Component Patterns**: - Composition (flexible, reusable UI components) - Custom hooks (extract reusable logic) - Render props (dynamic rendering) - Compound components (related component groups) - Container/presentational split (logic vs UI) - HOCs (cross-cutting concerns) **State Management Selection**: - useState for component-local state - Context API for app-wide state (<5 contexts) - Zustand for medium apps (less boilerplate) - Redux Toolkit for large apps (complex state, DevTools) - React Query/SWR for server state (API data) **Performance Optimization**: - Memoization