Cursor rule

1---
2description: Custom hooks patterns for data fetching, forms, and UI state management
3globs: ["src/hooks/**/*.{ts,tsx}"]
4alwaysApply: false
5---
6 
7# Custom Hooks Rules
8 
9## Hook Organization Patterns
10 
11### Data Fetching Hooks
12```tsx
13// hooks/useUsers.ts
14export const useUsers = () => {
15  return useQuery({
16    queryKey: ['users'],
17    queryFn: () => userService.getAllUsers(),
18    staleTime: 5 * 60 * 1000, // 5 minutes
19  })
20}
21 
22export const useUser = (id: string) => {
23  return useQuery({
24    queryKey: ['users', id],
25    queryFn: () => userService.getUser(id),
26    enabled: !!id,
27  })
28}
29```
30 
31### Form Hooks
32```tsx
33// hooks/useUserForm.ts
34export const useUserForm = (initialData?: Partial<User>) => {
35  const form = useForm<UserFormData>({
36    resolver: zodResolver(userSchema),
37    defaultValues: initialData || {},
38  })
39 
40  const { mutate: saveUser, isPending } = useMutation({
41    mutationFn: userService.updateUser,
42    onSuccess: () => toast.success('User saved'),
43    onError: (error) => toast.error(error.message),
44  })
45 
46  return { form, saveUser, isPending }
47}
48```
49 
50### UI State Hooks
51```tsx
52// hooks/useDisclosure.ts
53export const useDisclosure = (initialState = false) => {
54  const [isOpen, setIsOpen] = useState(initialState)
55  
56  const open = useCallback(() => setIsOpen(true), [])
57  const close = useCallback(() => setIsOpen(false), [])
58  const toggle = useCallback(() => setIsOpen(prev => !prev), [])
59  
60  return { isOpen, open, close, toggle }
61}
62```
63 
64### Local Storage Hook
65```tsx
66// hooks/useLocalStorage.ts
67export const useLocalStorage = <T>(key: string, initialValue: T) => {
68  const [storedValue, setStoredValue] = useState<T>(() => {
69    try {
70      const item = window.localStorage.getItem(key)
71      return item ? JSON.parse(item) : initialValue
72    } catch (error) {
73      return initialValue
74    }
75  })
76 
77  const setValue = useCallback((value: T | ((val: T) => T)) => {
78    try {
79      const valueToStore = value instanceof Function ? value(storedValue) : value
80      setStoredValue(valueToStore)
81      window.localStorage.setItem(key, JSON.stringify(valueToStore))
82    } catch (error) {
83      console.error(error)
84    }
85  }, [key, storedValue])
86 
87  return [storedValue, setValue] as const
88}
89```
90 
91## Hook Naming Conventions
92- **Data**: `useUsers`, `useUser`, `useProducts`
93- **Forms**: `useUserForm`, `useProductForm`
94- **UI State**: `useDisclosure`, `useToggle`, `useLocalStorage`
95- **Business Logic**: `useAuth`, `useCart`, `useNotifications`
96 
97## Hook Extraction Rules
98 
99### Extract Logic When:
100- Same logic used in 2+ components
101- Component exceeds 100 lines due to logic
102- Complex state management patterns
103- API interaction patterns
104 
105### Don't Extract When:
106- Logic is component-specific
107- Only used once
108- Simple useState patterns
109