A React hook and utility functions for efficiently batch-fetching authenticated images with automatic deduplication, caching, and memory cleanup. ## Key Components - **`configureBatchImageFetch`** - Global configuration function for setting tenant URLs and dev mode settings - **`batchFetchAuthenticatedImages`** - Core utility function that fetches multiple images with authentication headers - **`useBatchImages`** - React hook that manages batch image fetching with automatic deduplication and cleanup - **`BatchImageFetchConfig`** - Configuration interface for tenant URLs, dev mode, and auth tokens ## Usage Example ```typescript // App initialization configureBatchImageFetch({ tenantHostUrl: 'https://tenant.openframe.dev', enableDevMode: true, accessTokenKey: 'of_access_token' }) // In a React component function OrganizationList({ organizations }) { const imageUrls = useMemo(() => organizations.map(org => org.imageUrl).filter(Boolean), [organizations] ) const fetchedImages = useBatchImages(imageUrls) return (

{organizations.map(org => ( {org.name}

))}

) } // Direct batch fetching const images = await batchFetchAuthenticatedImages([ '/api/organizations/123/image', '/api/organizations/456/image' ]) ``` The hook automatically handles URL normalization, adds cache busters, includes authentication headers in dev mode, and cleans up blob URLs to prevent memory leaks.