Cursor rule

1---
2description: React hooks patterns and Rules
3globs: "**/hooks/**/*.{ts,tsx}"
4---
5 
6# React Hooks Rules
7 
8## Core Principles
9- Use TanStack Query (React Query) as primary data fetching solution
10- Use useAsync/useAsyncFn for one-off async operations
11- Follow hooks naming conventions ( use-something.ts )
12- Handle loading and error states consistently
13- Never build large hooks, use single responsibility 
14 
15## TanStack Query Patterns
16```tsx
17import { useQuery, useMutation } from '@tanstack/react-query'
18 
19// Data fetching with proper types
20export function useUserData(userId: string) {
21  return useQuery({
22    queryKey: ['user', userId],
23    queryFn: async () => {
24      const data = await fetchUser(userId)
25      return data as User
26    }
27  })
28}
29 
30// Mutation with optimistic updates
31export function useUpdateUser() {
32  const queryClient = useQueryClient()
33  
34  return useMutation({
35    mutationFn: updateUser,
36    onMutate: async (newUser) => {
37      await queryClient.cancelQueries({ queryKey: ['user', newUser.id] })
38      const previousUser = queryClient.getQueryData(['user', newUser.id])
39      
40      queryClient.setQueryData(['user', newUser.id], newUser)
41      return { previousUser }
42    },
43    onError: (err, newUser, context) => {
44      queryClient.setQueryData(
45        ['user', newUser.id],
46        context?.previousUser
47      )
48    }
49  })
50}
51```
52 
53## Async Operations
54```tsx
55import { useAsync, useAsyncFn } from 'react-use'
56 
57// For values that load once and remain static
58export function useStaticData() {
59  const state = useAsync(async () => {
60    const data = await fetchStaticData()
61    return data
62  }, [])
63 
64  return state
65}
66 
67// For operations that need manual triggering
68export function useManualOperation() {
69  const [state, execute] = useAsyncFn(async (params) => {
70    const result = await someOperation(params)
71    return result
72  }, [])
73 
74  return { state, execute }
75}
76```
77 
78## Custom Hooks Patterns
79```tsx
80// Combine multiple queries
81export function useUserWithPosts(userId: string) {
82  const user = useQuery({
83    queryKey: ['user', userId],
84    queryFn: () => fetchUser(userId)
85  })
86  
87  const posts = useQuery({
88    queryKey: ['posts', userId],
89    queryFn: () => fetchUserPosts(userId),
90    enabled: !!user.data
91  })
92 
93  return {
94    user: user.data,
95    posts: posts.data,
96    isLoading: user.isLoading || posts.isLoading,
97    error: user.error || posts.error
98  }
99}
100```
101 
102## Error Handling
103- Always handle loading, error, and success states
104- Use proper error boundaries for query errors
105- Implement retry logic where appropriate
106- Show user-friendly error messages
107 
108## Performance
109- Use proper query keys for caching
110- Implement stale-while-revalidate patterns
111- Use suspense mode when appropriate
112- Handle pagination and infinite queries efficiently
113```
114 
115```