cursorrules/.cursor/rules/react-patterns.mdc at main · ivangrynenko/cursorrules · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
---
description: React component patterns and hooks usage guidelines
globs: *.jsx, *.tsx
---
# React Patterns and Best Practices

Ensures React components follow recommended patterns and hook usage.

<rule>
name: react_patterns
description: Enforce React component patterns and hooks best practices
filters:
  - type: file_extension
    pattern: "\\.(jsx|tsx)$"

actions:
  - type: enforce
    conditions:
      - pattern: "useEffect\\([^,]+\\)"
        message: "Specify dependencies array in useEffect"

      - pattern: "useState\\([^)]*\\).*useState\\([^)]*\\)"
        message: "Consider combining related state variables"

      - pattern: "React\\.memo\\(.*\\)"
        message: "Ensure React.memo is used appropriately for performance"

  - type: suggest
    message: |
      React Best Practices:
      - Use functional components with hooks
      - Implement proper memoization
      - Follow the Rules of Hooks
      - Use TypeScript for prop types
      - Consider custom hooks for reusable logic

metadata:
  priority: high
  version: 1.0
</rule>