Imported from GrupoUS/gpus (src/hooks/AGENTS.md). Install upstream with npx skills add GrupoUS/gpus --skill hooks. Copyright stays with the author.

src/hooks/ - Custom React Hooks

Package Identity

Purpose: Reusable React hooks for state management, data fetching, and business logic
Tech: React 19 hooks with TypeScript and Convex integration

Patterns & Conventions

Naming Conventions:

• Always prefix with use (e.g., useAuth, useTheme)
• Descriptive names that indicate functionality
• camelCase naming with clear purpose

Hook Structure: ✅ DO: Follow standard React hook patterns

// src/hooks/use-mobile.tsx
export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean>(false)
  
  React.useEffect(() => {
    // Mobile detection logic
  }, [])
  
  return isMobile
}

✅ DO: Use Convex hooks for data fetching

// src/hooks/use-leads.ts
import { useQuery, useMutation } from 'convex/react'
import { api } from '../convex/_generated/api'

export function useLeads() {
  const leads = useQuery(api.leads.listLeads, {})
  const createLead = useMutation(api.leads.createLead)
  
  return { leads, createLead }
}

❌ DON'T: Create hooks with side effects beyond their purpose

// AVOID
export function useAuthWithRouting() {
  const auth = useAuth()
  navigate('/dashboard') // Side effect in hook
  return auth
}

Available Hooks

Touch Points / Key Files

JIT Index Hints

# Find all hooks
rg -n "export.*use[A-Z]" src/hooks/

# Find specific hook
rg -n "useIsMobile|useAuth|useTheme" src/hooks/

# Find Convex usage in hooks
rg -n "useQuery|useMutation" src/hooks/

# Find useState usage
rg -n "useState" src/hooks/

Common Hook Patterns

Data Fetching Hooks:

export function useLeads(filters?: LeadFilters) {
  return useQuery(api.leads.listLeads, filters || {})
}

Mutation Hooks:

export function useLeadMutations() {
  const create = useMutation(api.leads.createLead)
  const update = useMutation(api.leads.updateLead)
  
  return { create, update }
}

Local State Hooks:

export function useModalState() {
  const [isOpen, setIsOpen] = useState(false)
  const [data, setData] = useState(null)
  
  return { isOpen, setIsOpen, data, setData }
}

Pre-PR Checks

# Ensure hooks are properly tested
bun run test src/hooks/

# Check for linting issues
bun run lint

# Type checking
bun run build