One Hook That Killed 23 Components: The Context-Aware API Pattern

const { data } = useTestimonials(pagelink); 

// Before: Separate component for each context const GenAiTestimonials = () => { const { data } = useQuery('/api/genai-testimonials', transformGenAiTestimonials); return <TestimonialCarousel data={data} />; }; const MobileAppTestimonials = () => { const { data } = useQuery('/api/mobile-testimonials', transformMobileTestimonials); return <TestimonialCarousel data={data} />; }; const GISTestimonials = () => { const { data } = useQuery('/api/gis-testimonials', transformGISTestimonials); return <TestimonialCarousel data={data} />; }; // ... 20 more similar components 

// Slightly better, but still painful const TestimonialsSection = ({ apiEndpoint, transformFunction, cacheKey, retryCount, staleTime, errorMessage }) => { const { data } = useQuery({ queryKey: [cacheKey], queryFn: () => fetch(apiEndpoint).then(transformFunction), retry: retryCount, staleTime }); if (!data) return <div>{errorMessage}</div>;  return <TestimonialCarousel data={data} />; }; // Parent component nightmare <TestimonialsSection apiEndpoint="/api/genai-testimonials" transformFunction={transformGenAiTestimonials} cacheKey="genai-testimonials" retryCount={3} staleTime={300000} errorMessage="Failed to load GenAI testimonials" /> 

// After: One component, infinite contexts const TestimonialsSection = ({ pagelink }) => { const { data, isLoading, error } = useTestimonials(pagelink); if (isLoading) return <TestimonialSkeleton />; if (error) return <TestimonialError onRetry={refetch} />;  return <TestimonialCarousel data={data} />; }; // Usage - component automatically knows what to fetch <TestimonialsSection pagelink="genai" /> // Gets GenAI testimonials <TestimonialsSection pagelink="mobile-app" /> // Gets mobile testimonials <TestimonialsSection pagelink="gis" /> // Gets GIS testimonials 

const useTestimonials = createHookMap({ 'genai': useGenAiTestimonials, 'mobile-app': useMobileAppTestimonials, 'gis': useGISTestimonials, 'erp': useERPTestimonials, 'default': useGeneralTestimonials }, 'default'); 

type HookMap<T> = Record<string, () => UseQueryResult<T>>; type HookSelector<T> = (context?: string) => UseQueryResult<T>; export function createHookMap<T>( hookMap: HookMap<T>, defaultKey: string ): HookSelector<T> { return (context?: string): UseQueryResult<T> => { // Smart hook selection with fallback strategy const selectedHook = context && hookMap[context] ? hookMap[context] : hookMap[defaultKey]; if (!selectedHook) { console.warn(`No hook found for context: ${context}, falling back to default`); // Return controlled error state instead of crashing return { data: undefined, isLoading: false, isError: true, error: new Error(`Invalid context: ${context}`), refetch: () => Promise.resolve({ data: undefined } as any), // ... other UseQueryResult properties } as UseQueryResult<T>; } return selectedHook(); }; } 

export function createNestedHookMap<T>( hookMap: Record<string, Record<string, () => UseQueryResult<T>>>, defaultPath: string ): HookSelector<T> { return (contextPath?: string): UseQueryResult<T> => { if (!contextPath) { return resolveDefaultHook(hookMap, defaultPath); } const [context, subContext] = contextPath.split('.'); // Resolution priority: // 1. Exact match: 'genai.document-analyzer' // 2. Context default: 'genai.default'  // 3. Global default: 'default.default' if (hookMap[context]?.[subContext]) { return hookMap[context][subContext](); } if (hookMap[context]?.['default']) { return hookMap[context]['default'](); } return resolveDefaultHook(hookMap, defaultPath); }; } // Usage example export const useProcessingMode = createNestedHookMap({ 'genai': { 'document-analyzer': useDocumentAnalyzerModes, 'chat-interface': useChatInterfaceModes, 'image-processor': useImageProcessorModes, 'default': useGenAiProcessingModes }, 'mobile-app': { 'ios': useIOSProcessingModes, 'android': useAndroidProcessingModes, 'cross-platform': useCrossPlatformModes, 'default': useMobileProcessingModes } }, 'genai.default'); // Component usage const { data } = useProcessingMode('genai.document-analyzer'); 

// API hook library export const useHeroSection = createHookMap({ 'home': useHomeHero, 'genai': useGenAiHero, 'mobile-app': useMobileAppHero, 'gis-solutions': useGISHero, 'erp': useERPHero, 'about': useAboutHero, 'contact': useContactHero, 'services': useServicesHero }, 'home'); export const useTestimonials = createHookMap({ 'genai': useGenAiTestimonials, 'mobile-app': useMobileAppTestimonials, 'gis-solutions': useGISTestimonials, 'erp': useERPTestimonials, 'services': useServicesTestimonials, 'default': useGeneralTestimonials }, 'default'); export const useFeatures = createHookMap({ 'genai': useGenAiFeatures, 'mobile-app': useMobileAppFeatures, 'gis-solutions': useGISFeatures, 'erp': useERPFeatures, 'default': useGeneralFeatures }, 'default'); export const usePricing = createHookMap({ 'genai': useGenAiPricing, 'mobile-app': useMobileAppPricing, 'enterprise': useEnterprisePricing, 'default': useStandardPricing }, 'default'); 

// Dynamic hook selection based on user permissions export const useRestrictedContent = createConditionalHookMap({ conditions: [ { when: (user) => user?.role === 'admin', hookMap: { 'genai': useAdminGenAiContent, 'mobile-app': useAdminMobileContent } }, { when: (user) => user?.subscription === 'premium', hookMap: { 'genai': usePremiumGenAiContent, 'mobile-app': usePremiumMobileContent } } ], fallback: { 'genai': usePublicGenAiContent, 'mobile-app': usePublicMobileContent } }); // Usage with automatic permission handling const ContentSection = ({ pagelink }) => { const user = useCurrentUser(); const { data } = useRestrictedContent(pagelink, user); return <ContentDisplay data={data} />; }; 

// Combine multiple context-aware hooks export const usePageData = (pagelink: string) => { const hero = useHeroSection(pagelink); const testimonials = useTestimonials(pagelink); const features = useFeatures(pagelink); const pricing = usePricing(pagelink); // Smart loading state - show content as it becomes available const loadingStates = [hero, testimonials, features, pricing]; const isLoading = loadingStates.every(state => state.isLoading); const hasError = loadingStates.some(state => state.error); return { data: { hero: hero.data, testimonials: testimonials.data, features: features.data, pricing: pricing.data }, isLoading, hasError, refetchAll: () => Promise.all(loadingStates.map(state => state.refetch)) }; }; 

// Different caching strategies for different contexts const createContextAwareHook = (endpoint: string, transform: Function) => { return () => useQuery({ queryKey: [endpoint], queryFn: () => fetch(`/api${endpoint}`).then(transform), // Context-specific caching staleTime: getCacheTime(endpoint), cacheTime: getRetentionTime(endpoint), refetchOnWindowFocus: shouldRefetchOnFocus(endpoint), retry: getRetryStrategy(endpoint) }); }; const getCacheTime = (endpoint: string): number => { const strategies = { '/testimonials': 10 * 60 * 1000, // 10 minutes - changes rarely '/pricing': 60 * 60 * 1000, // 1 hour - very stable '/user-dashboard': 30 * 1000, // 30 seconds - personal data '/real-time-data': 0, // No caching - always fresh }; return strategies[endpoint] || 5 * 60 * 1000; // Default 5 minutes }; 

// Shared data types interface TestimonialData { id: string; name: string; role: string; company: string; quote: string; rating: number; image?: string; featured: boolean; source: string; // Context tracking } // Context-specific transformers with validation export const transformGenAiTestimonials = ( data: unknown ): TestimonialData[] => { // Runtime type validation if (!isValidTestimonialResponse(data)) { logger.error('Invalid GenAI testimonial data', { data }); return getFallbackTestimonials('genai'); } const apiData = data as GenAiTestimonialApiResponse; return apiData.data.testimonials.map(item => ({ id: item.id.toString(), name: sanitizeString(item.name), role: sanitizeString(item.role), company: sanitizeString(item.company), quote: sanitizeString(item.quote), rating: Math.min(5, Math.max(0, item.rating || 5)), image: buildImageUrl(item.image?.url) || getDefaultAvatar(item.name), featured: Boolean(item.featured), source: 'genai' })); }; // Type guard for runtime safety function isValidTestimonialResponse(data: unknown): boolean { if (!data || typeof data !== 'object') return false; const obj = data as any; return ( 'data' in obj && 'testimonials' in obj.data && Array.isArray(obj.data.testimonials) && obj.data.testimonials.every((t: any) => typeof t.id !== 'undefined' && typeof t.name === 'string' && typeof t.quote === 'string' ) ); } // Full TypeScript inference in components const TestimonialsSection = ({ pagelink }: { pagelink: string }) => { const { data } = useTestimonials(pagelink); // ^? TestimonialData[] | undefined return ( <div> {data?.map(testimonial => ( <TestimonialCard key={testimonial.id} name={testimonial.name} // ✅ Fully typed company={testimonial.company} // ✅ Fully typed rating={testimonial.rating} // ✅ Fully typed />  ))} </div>  ); }; 

// Shared cache optimization const useSharedTestimonials = () => { return useQuery({ queryKey: ['testimonials', 'shared'], queryFn: fetchSharedTestimonials, staleTime: 15 * 60 * 1000, // 15 minutes cacheTime: 60 * 60 * 1000, // 1 hour retention }); }; // Context-specific with fallback to shared const useContextTestimonials = (pagelink: string) => { const sharedQuery = useSharedTestimonials(); const contextQuery = useQuery({ queryKey: ['testimonials', pagelink], queryFn: () => fetchContextTestimonials(pagelink), enabled: !!pagelink && pagelink !== 'default', staleTime: 5 * 60 * 1000, }); // Return context-specific if available, otherwise shared if (contextQuery.data && contextQuery.data.length > 0) { return contextQuery; } return sharedQuery; }; 

// Predictive prefetching based on user navigation patterns export const usePrefetchStrategy = (currentPagelink: string) => { const queryClient = useQueryClient(); useEffect(() => { const prefetchTargets = getPrefetchTargets(currentPagelink); // Prefetch likely next pages prefetchTargets.forEach(target => { queryClient.prefetchQuery({ queryKey: ['testimonials', target], queryFn: () => fetchTestimonials(target), staleTime: 10 * 60 * 1000 }); }); // Prefetch related contexts const relatedContexts = getRelatedContexts(currentPagelink); relatedContexts.forEach(context => { setTimeout(() => { queryClient.prefetchQuery({ queryKey: ['features', context], queryFn: () => fetchFeatures(context) }); }, 2000); // Delayed prefetch }); }, [currentPagelink, queryClient]); }; // Smart prefetch targets based on analytics const getPrefetchTargets = (current: string): string[] => { const navigationPatterns = { 'home': ['genai', 'mobile-app', 'about'], 'genai': ['genai-chatbot', 'about', 'contact'], 'mobile-app': ['services', 'pricing', 'contact'], }; return navigationPatterns[current] || []; }; 

components/testimonials/ ├── GenAiTestimonials.tsx (245 lines) ├── MobileAppTestimonials.tsx (267 lines) ├── GISTestimonials.tsx (234 lines) ├── ERPTestimonials.tsx (289 lines) ├── ServicesTestimonials.tsx (198 lines) ... 18 more files Total: 5,670 lines of code 

components/testimonials/ ├── TestimonialsSection.tsx (89 lines) hooks/ ├── useTestimonials.ts (34 lines) config/ ├── testimonialHooks.ts (67 lines) Total: 190 lines of code 

const FeatureSection = ({ page, userTier, region, experiment }) => { const [features, setFeatures] = useState([]); useEffect(() => { let endpoint = '/api/features'; if (page === 'genai') { endpoint = userTier === 'premium' ? '/api/genai-premium-features' : '/api/genai-basic-features'; } else if (page === 'mobile-app') { endpoint = region === 'US' ? '/api/mobile-us-features' : '/api/mobile-global-features'; } // ... 50 more lines of conditional logic fetchFeatures(endpoint).then(setFeatures); }, [page, userTier, region, experiment]); // Complex rendering logic... }; 

const FeatureSection = ({ pagelink }) => { const user = useCurrentUser(); const { data } = useFeatures(pagelink, user); return <FeatureGrid features={data} />; }; // All complexity moved to hook configuration const useFeatures = createConditionalHookMap({ contexts: ['genai', 'mobile-app', 'gis', 'erp'], conditions: [ { when: isPremiumUser, hookSuffix: '-premium' }, { when: isUSRegion, hookSuffix: '-us' }, { when: isExperimentB, hookSuffix: '-experiment-b' } ] }); 

const DashboardPage = ({ userId }) => { const user = useUserProfile(userId); const services = user?.subscribedServices || []; return ( <Dashboard> {services.map(service => ( <DashboardWidget key={service} type="metrics" context={service} />  ))} </Dashboard>  ); }; // Widget automatically knows what metrics to show const DashboardWidget = ({ type, context }) => { const { data } = useDashboardData(`${context}.${type}`); return <MetricsWidget data={data} />; }; 

// Perfect for white-label solutions const useBrandedContent = createHookMap({ 'client-a': useClientAContent, 'client-b': useClientBContent, 'client-c': useClientCContent, 'default': useDefaultContent }, 'default'); // Component works across all tenants const BrandedHero = () => { const tenant = useTenant(); const { data } = useBrandedContent(tenant.slug); return <HeroSection {...data} />; }; 

// One product listing, all categories const useProducts = createNestedHookMap({ 'electronics': { 'phones': usePhoneProducts, 'laptops': useLaptopProducts, 'default': useElectronicsProducts }, 'fashion': { 'men': useMensFashion, 'women': useWomensFashion, 'default': useFashionProducts } }, 'electronics.default'); // Usage: useProducts('fashion.women') 

// Dynamic page builder const usePageContent = createHookMap({ 'blog': useBlogContent, 'landing': useLandingContent, 'product': useProductContent, 'custom': useCustomContent }, 'custom'); const DynamicPage = ({ pageType, pageId }) => { const { data } = usePageContent(`${pageType}/${pageId}`); return <PageBuilder blocks={data.blocks} />; }; 

// Good: Composable hooks const usePageData = (context: string) => { const hero = useHero(context); const features = useFeatures(context); const testimonials = useTestimonials(context); return { hero, features, testimonials }; }; // Bad: Monolithic hook const useAllPageData = (context: string) => { // Fetches everything in one giant request }; 

const createResilientHookMap = <T>(hookMap: HookMap<T>, defaultKey: string) => { return (context?: string) => { try { const hook = hookMap[context] || hookMap[defaultKey]; const result = hook(); // If primary source fails, try fallback if (result.error && context !== defaultKey) { return hookMap[defaultKey](); } return result; } catch (error) { console.error('Hook execution failed:', error); return createErrorState<T>(error); } }; }; 

// Track hook usage and performance const withMetrics = <T>(hookName: string, hook: () => UseQueryResult<T>) => { return () => { const startTime = performance.now(); const result = hook(); const endTime = performance.now(); // Track execution time analytics.track('hook_performance', { hookName, executionTime: endTime - startTime, cacheHit: !result.isFetching && !!result.data, error: !!result.error }); return result; }; };