Custom Hook Guidelines

This rule outlines the guidelines for creating custom React hooks within this project.

Custom Hooks

• Purpose: Encapsulate reusable stateful logic, especially for data fetching or complex UI interactions.

• Location: Place custom hooks in the apps/web/hooks/ directory.

• Naming: Use the use prefix (e.g., useAccounts.ts ).

• Data Fetching: For fetching data from API endpoints, prefer using useSWR . Follow the guidelines outlined in data-fetching.mdc.

• Create dedicated hooks for specific data types (e.g., useAccounts , useLabels ).

• The hook should typically wrap useSWR , handle the API endpoint URL, and return the data, loading state, error state, and potentially the mutate function from SWR.

• Simplicity: Keep hooks focused on a single responsibility.

By adhering to these guidelines, we ensure a consistent approach to reusable logic and data fetching throughout the application.