Hooks
43 custom hooks in frontend/src/hooks/, providing reusable stateful logic for forms, calculations, UI interactions, authentication, and URL state management.
Core Hooks
| Hook | File | Purpose |
|---|---|---|
useEntityForm | useEntityForm.ts | Generic entity CRUD form state management |
useFinancialDocumentForm | useFinancialDocumentForm.ts | Shared form logic for Quotes and Invoices |
useAmountCalculation | useAmountCalculation.ts | Line item amount/tax calculations |
useLineItemsTable | useLineItemsTable.ts | Line item table add/edit/remove state |
useDialogManager | useDialogManager.ts | Coordinated dialog open/close state |
useInlineEdit | useInlineEdit.ts | Click-to-edit inline field editing |
useResizableColumns | useResizableColumns.ts | Drag-to-resize table column state |
useCleanupTimeout | useCleanupTimeout.ts | Safe setTimeout with auto-cleanup on unmount |
Auth & Permissions
| Hook | Purpose |
|---|---|
useAuthInit | Bootstrap authentication state on app load |
usePermissions | Check RBAC Authorization permissions for current user |
useSessionStorage | Typed session storage wrapper |
See Authentication for the full auth flow.
Domain-Specific Hooks
| Hook | Domain | Related |
|---|---|---|
useUValueCalculation | Thermal U-value calculations | Energy Calculations, Building Components |
useGeocoding | Address geolocation lookup | Buildings |
useContactLookup | Contact search/autocomplete | Contacts |
useDynamicFavicon | Environment-aware favicon | Frontend Architecture |
URL State Hooks (hooks/url-state/)
Mandatory — never use raw useSearchParams. See URL State Management.
| Hook | Purpose |
|---|---|
useTabState(validTabs, default) | Tab switching synced to URL |
useFilterState(defaults) | Multi-param filter state in URL |
useModalState(param?) | Deep-linkable modal/dialog |
useMultiSortState(columns, defaultSort) | Multi-column sort with Shift+Click stacking |
Property Mapping Hooks (hooks/property-mappings/)
Hooks for HubSpot Integration property field mapping configuration between HubSpot and Renewa One entities.
Usage Rules
| Data Type | Correct Tool | Wrong Tool |
|---|---|---|
| Server entities | React Query Pattern via lib/queries/ | useState |
| URL-shareable UI | URL state hooks | raw useSearchParams |
| Form fields | react-hook-form + Zod | manual useState per field |
| Transient UI | useState | Zustand |
See State Management for the complete decision matrix.
Related
- URL State Management — Deep-linkable UI state
- State Management — When to use which state tool
- Frontend Architecture — Hook placement in project structure
- RBAC Authorization — Permission hooks
- Energy Calculations — Calculation hooks
- Query Modules — Data fetching hooks