lovable-boilerplate hooks.instructions.md

Custom Hooks Guidelines

HOOK PATTERNS & BEST PRACTICES

Data Fetching Hooks

// PERFECT: Focused data fetching
export const useUsers = () => {
  return useQuery({
    queryKey: ['users'],
    queryFn: () => userService.getAllUsers(),
    staleTime: 5 * 60 * 1000, // 5 minutes
  })
}

export const useUser = (id: string) => {
  return useQuery({
    queryKey: ['users', id],
    queryFn: () => userService.getUser(id),
    enabled: !!id,
  })
}

Form Hooks

// PERFECT: Reusable form logic
export const useUserForm = (initialData?: Partial<User>) => {
  const form = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
    defaultValues: initialData || {},
  })

  const { mutate: saveUser, isPending } = useMutation({
    mutationFn: userService.updateUser,
    onSuccess: () => toast.success('User saved'),
    onError: (error) => toast.error(error.message),
  })

  return { form, saveUser, isPending }
}

UI State Hooks

// PERFECT: Reusable UI state
export const useDisclosure = (initialState = false) => {
  const [isOpen, setIsOpen] = useState(initialState)
  
  return {
    isOpen,
    open: () => setIsOpen(true),
    close: () => setIsOpen(false),
    toggle: () => setIsOpen(prev => !prev),
  }
}

Hook Naming Convention

• Data: useUsers, useUser, useProducts
• Forms: useUserForm, useProductForm
• UI State: useDisclosure, useToggle, useLocalStorage
• Business Logic: useAuth, useCart, useNotifications