Cursor rule

1# React Patterns and Best Practices
2 
3## Component Structure
4 
5- Use functional components with hooks
6- Place components in appropriate directories:
7  - `src/components/ui/` for reusable UI components
8  - `src/components/` for feature-specific components
9  - `src/pages/` for page-level components
10- Use PascalCase for component names and files
11 
12## Context Usage
13 
14- Use React Context for global state (Auth, Cart, Payment)
15- Wrap providers in `src/Provider.tsx`
16- Access context values using custom hooks (e.g., `useAuth()`, `useCart()`)
17- Keep context providers lightweight and focused
18 
19## Custom Hooks
20 
21- Create custom hooks in `src/hooks/` directory
22- Use descriptive names starting with `use` (e.g., `useMobile`, `useAddressStorage`)
23- Keep hooks focused on single responsibility
24- Return objects with clear property names
25 
26## State Management
27 
28- Use `useState` for local component state
29- Use `useReducer` for complex state logic
30- Minimize `useEffect` usage - prefer event-driven updates
31- Use context for cross-component state sharing
32 
33## Form Handling
34 
35- Use React Hook Form with Zod validation
36- Define validation schemas in `src/lib/validations/`
37- Use controlled components for form inputs
38- Handle form submission with proper error handling
39 
40## Event Handling
41 
42- Use descriptive handler names (e.g., `handleAddToCart`, `handleFormSubmit`)
43- Pass event objects to handlers when needed
44- Use proper event types for TypeScript
45- Prevent default behavior when appropriate
46 
47## Component Composition
48 
49- Use composition over inheritance
50- Pass children as props when appropriate
51- Use render props or function children for complex logic
52- Keep components focused and single-purpose
53 
54## Performance Considerations
55 
56- Use `React.memo` for expensive components
57- Use `useCallback` for event handlers passed to child components
58- Use `useMemo` for expensive calculations
59- Lazy load routes and heavy components
60 
61## Example Patterns
62 
63```typescript
64// Good: Functional component with proper typing
65export const ProductCard: React.FC<ProductCardProps> = ({
66  product,
67  onAddToCart,
68}) => {
69  const handleClick = useCallback(() => {
70    onAddToCart(product.id);
71  }, [product.id, onAddToCart]);
72 
73  return <div className="product-card">{/* component content */}</div>;
74};
75 
76// Good: Custom hook usage
77const { user, signIn } = useAuth();
78const { addToCart } = useCart();
79```
80 
81description:
82globs:
83alwaysApply: false
84 
85---
86