Cursor rule

1---
2description: React component patterns and hooks usage guidelines
3globs: *.jsx, *.tsx
4---
5# React Patterns and Best Practices
6 
7Ensures React components follow recommended patterns and hook usage.
8 
9<rule>
10name: react_patterns
11description: Enforce React component patterns and hooks best practices
12filters:
13  - type: file_extension
14    pattern: "\\.(jsx|tsx)$"
15 
16actions:
17  - type: enforce
18    conditions:
19      - pattern: "useEffect\\([^,]+\\)"
20        message: "Specify dependencies array in useEffect"
21 
22      - pattern: "useState\\([^)]*\\).*useState\\([^)]*\\)"
23        message: "Consider combining related state variables"
24 
25      - pattern: "React\\.memo\\(.*\\)"
26        message: "Ensure React.memo is used appropriately for performance"
27 
28  - type: suggest
29    message: |
30      React Best Practices:
31      - Use functional components with hooks
32      - Implement proper memoization
33      - Follow the Rules of Hooks
34      - Use TypeScript for prop types
35      - Consider custom hooks for reusable logic
36 
37metadata:
38  priority: high
39  version: 1.0
40</rule>