react-patternslisted

# React Patterns Skill React 18 + TypeScript standards and best practices. ## When to Apply - Creating new React components - Implementing custom hooks - State management decisions - Performance optimization - Code review for React code --- ## Component Standards ### Component Structure Rules | Rule | Description | |------|-------------| | Functional only | Use function components, no class components | | TypeScript props | Define Props interface for all components | | Single responsibility | One component = one purpose | | Max 200 lines | Split larger components into sub-components | ### Component Organization | Section | Order | |---------|-------| | 1. Imports | Types first, then libraries, then local | | 2. Props interface | Define before component | | 3. Hooks | All hooks at top of function | | 4. Handlers | Event handlers after hooks | | 5. Effects | useEffect after handlers | | 6. Return | JSX at the end | --- ## Hook Standards ### Built-in Hooks Usage | Hook | Use When | Avoid When | |------|----------|------------| | `useState` | Local component state | Shared state (use Zustand) | | `useEffect` | Side effects, subscriptions | Derived state (use `useMemo`) | | `useMemo` | Expensive calculations | Simple values | | `useCallback` | Callbacks passed to children | Inline handlers | | `useRef` | DOM refs, mutable values | State that triggers renders | ### Custom Hook Guidelines | Guideline | Description | |-----------|-------------| | Prefix with `use` | `useFe