Custom Hooks

The shared library provides 28+ custom React hooks at frontend/shared/src/hooks/, organized into five categories: service hooks for API integration, resilience hooks for network reliability, accessibility hooks for WCAG compliance, performance hooks for monitoring, and domain-specific hooks for lineage, caching, and export.

Service Hooks

These hooks wrap the API client modules with TanStack Query for caching, loading states, and error handling:

useApiClient Hook

The foundational hook providing access to all initialized API clients:

// frontend/shared/src/hooks/useApiClient.tsx
export function useApiClients(): ApiClients {
  return getApiClients();
}
 
export function useApiClientStatus(): { isInitialized: boolean } {
  // Returns whether API clients have been initialized
}

Resilience Hooks

useRetryFetch

const { data, error, isLoading, retry } = useRetryFetch('/api/data', {
  maxRetries: 3,
  retryDelay: 1000,
  retryOn: [500, 502, 503],
});

Accessibility Hooks

Exported from useAccessibility.ts:

Performance Hooks

Exported from usePerformance.tsx:

Domain-Specific Hooks

Lineage Hooks (useLineage.ts)

const { data: lineage, isLoading } = useLineage(assetId, { depth: 3 });
const { data: upstream } = useUpstreamLineage(assetId);
const { data: downstream } = useDownstreamLineage(assetId);
const { data: impact } = useImpactAnalysis(assetId);

Analytics Hooks (useAnalytics.ts)

Provides 20+ hooks for cross-tenant analytics:

• usePlatformMetrics, usePlatformUsageTrends
• useTenantMetrics, useTenantUsageTrends
• usePlatformCostSummary, useCostAllocation
• useAlertConfigs, useActiveAlerts

Audit Hooks (useAudit.ts)

• useAuditEvents, useAuditEvent
• useAuditTimeline, useUserActivity
• useComplianceReports, useRetentionPolicies
• useExportAuditLogs

Billing Hooks (useBilling.ts)

• usePlans, useSubscription
• useInvoices, usePaymentMethods
• useCostForecast, useSpendingAlerts
• useCurrentUsage, useUsageHistory

Cross-Workbench Hook (useCrossWorkbench.ts)

Provides a convenience wrapper around the crossWorkbenchStore:

const { selectedEntity, selectEntity, requestNavigation } = useCrossWorkbench();

Export Hook (useExport.ts)

const { exportToPdf, exportToPng, exportToCsv, isExporting } = useExport();

Semantic Cache Hook (useSemanticCache.ts)

Provides client-side caching for semantic model data with LRU eviction.