@ -6,6 +6,11 @@ import { TProfile } from '@/types'
import { useEffect , useState , useRef , useCallback } from 'react' import { useEffect , useState , useRef , useCallback } from 'react'
import logger from '@/lib/logger' import logger from '@/lib/logger'
// CRITICAL: Global deduplication - shared across ALL hook instances
// This prevents multiple components from fetching the same profile simultaneously
const globalFetchPromises = new Map < string , Promise < TProfile | null > > ( )
const globalFetchingPubkeys = new Set < string > ( )
export function useFetchProfile ( id? : string , skipCache = false ) { export function useFetchProfile ( id? : string , skipCache = false ) {
// CRITICAL: Reduce logging to prevent performance issues during infinite loops
// CRITICAL: Reduce logging to prevent performance issues during infinite loops
// Only log if we're actually going to process (not just checking)
// Only log if we're actually going to process (not just checking)
@ -25,10 +30,10 @@ export function useFetchProfile(id?: string, skipCache = false) {
const effectRunCountRef = useRef < Map < string , number > > ( new Map ( ) ) // Track how many times effect has run for each pubkey (safety guard against infinite loops)
const effectRunCountRef = useRef < Map < string , number > > ( new Map ( ) ) // Track how many times effect has run for each pubkey (safety guard against infinite loops)
const initializedPubkeysRef = useRef < Set < string > > ( new Set ( ) ) // Track pubkeys we've successfully initialized (have profile or failed)
const initializedPubkeysRef = useRef < Set < string > > ( new Set ( ) ) // Track pubkeys we've successfully initialized (have profile or failed)
// Function to check for profile updates
// Function to check for profile updates with GLOBAL deduplication
// fetchProfileEvent already checks: 1) IndexedDB, 2) network (with author's relays)
// fetchProfileEvent already checks: 1) IndexedDB, 2) network (with author's relays)
// Memoize to prevent recreation on every render
// Memoize to prevent recreation on every render
const checkProfile = useCallback ( async ( pubkey : string , cancelled : { current : boolean } ) = > { const checkProfile = useCallback ( async ( pubkey : string , cancelled : { current : boolean } ) : Promise < TProfile | null > = > {
// CRITICAL: Reduce logging during rapid scrolling to prevent performance issues
// CRITICAL: Reduce logging during rapid scrolling to prevent performance issues
// Only log at debug level during normal operations
// Only log at debug level during normal operations
logger . debug ( '[useFetchProfile] checkProfile called' , { logger . debug ( '[useFetchProfile] checkProfile called' , {
@ -38,15 +43,137 @@ export function useFetchProfile(id?: string, skipCache = false) {
} ) } )
if ( cancelled . current ) { if ( cancelled . current ) {
logger . debug ( '[useFetchProfile] Already cancelled, returning false' ) logger . debug ( '[useFetchProfile] Already cancelled, returning null' )
return false return null
}
// CRITICAL: Check if another hook instance is already fetching this pubkey
// If so, wait for that fetch to complete instead of starting a new one
// Add timeout protection to prevent infinite waits
const existingPromise = globalFetchPromises . get ( pubkey )
if ( existingPromise ) {
logger . debug ( '[useFetchProfile] Reusing existing fetch promise' , {
pubkey : pubkey.substring ( 0 , 8 )
} )
try {
// Add timeout to prevent waiting forever on a stuck promise
const timeoutPromise = new Promise < null > ( ( resolve ) = > {
setTimeout ( ( ) = > {
logger . warn ( '[useFetchProfile] Existing promise timeout, will start new fetch' , {
pubkey : pubkey.substring ( 0 , 8 )
} )
resolve ( null )
} , 5000 ) // 5 seconds
} )
const existingProfile = await Promise . race ( [ existingPromise , timeoutPromise ] )
if ( cancelled . current ) return null
// If timeout won, existingProfile will be null and we'll continue to start new fetch
if ( existingProfile === null && ! cancelled . current ) {
// Timeout occurred, clear the stuck promise and start fresh
globalFetchPromises . delete ( pubkey )
globalFetchingPubkeys . delete ( pubkey )
// Fall through to start new fetch
} else if ( existingProfile ) {
// Update state for this instance
setProfile ( existingProfile )
setIsFetching ( false )
initializedPubkeysRef . current . add ( pubkey )
if ( checkIntervalRef . current ) {
clearInterval ( checkIntervalRef . current )
checkIntervalRef . current = null
}
effectRunCountRef . current . delete ( pubkey )
return existingProfile
} else {
setIsFetching ( false )
return null
}
} catch ( err ) {
// If the existing promise failed, we'll try again below
logger . debug ( '[useFetchProfile] Existing promise failed, will retry' , {
pubkey : pubkey.substring ( 0 , 8 ) ,
error : err instanceof Error ? err.message : String ( err )
} )
// Clear the failed promise so we can start fresh
globalFetchPromises . delete ( pubkey )
globalFetchingPubkeys . delete ( pubkey )
}
}
// Mark as fetching globally to prevent other instances from starting
if ( globalFetchingPubkeys . has ( pubkey ) ) {
// Another instance is fetching, wait a bit and check again
await new Promise ( resolve = > setTimeout ( resolve , 50 ) )
const retryPromise = globalFetchPromises . get ( pubkey )
if ( retryPromise ) {
try {
// Add timeout protection here too
const timeoutPromise = new Promise < null > ( ( resolve ) = > {
setTimeout ( ( ) = > {
logger . warn ( '[useFetchProfile] Retry promise timeout, will start new fetch' , {
pubkey : pubkey.substring ( 0 , 8 )
} )
resolve ( null )
} , 5000 ) // 5 seconds
} )
const retryProfile = await Promise . race ( [ retryPromise , timeoutPromise ] )
if ( cancelled . current ) return null
if ( retryProfile === null && ! cancelled . current ) {
// Timeout occurred, clear and start fresh
globalFetchPromises . delete ( pubkey )
globalFetchingPubkeys . delete ( pubkey )
// Fall through to start new fetch
} else if ( retryProfile ) {
// Update state for this instance
setProfile ( retryProfile )
setIsFetching ( false )
initializedPubkeysRef . current . add ( pubkey )
if ( checkIntervalRef . current ) {
clearInterval ( checkIntervalRef . current )
checkIntervalRef . current = null
}
effectRunCountRef . current . delete ( pubkey )
return retryProfile
} else {
setIsFetching ( false )
return null
}
} catch ( err ) {
logger . debug ( '[useFetchProfile] Retry promise failed' , {
pubkey : pubkey.substring ( 0 , 8 ) ,
error : err instanceof Error ? err.message : String ( err )
} )
// Clear the failed promise
globalFetchPromises . delete ( pubkey )
globalFetchingPubkeys . delete ( pubkey )
// Fall through to start our own fetch
}
}
} }
// Create a new fetch promise with timeout protection
const fetchPromise = ( async ( ) : Promise < TProfile | null > = > {
try { try {
globalFetchingPubkeys . add ( pubkey )
const startTime = Date . now ( ) const startTime = Date . now ( )
// CRITICAL: Add timeout to prevent infinite hangs
// Use Promise.race to timeout after 5 seconds
const timeoutPromise = new Promise < never > ( ( _ , reject ) = > {
setTimeout ( ( ) = > {
reject ( new Error ( ` Profile fetch timeout after 5s for pubkey ${ pubkey . substring ( 0 , 8 ) } ` ) )
} , 5000 ) // 5 second timeout
} )
// Use fetchProfileEvent which includes author's relay list for better profile discovery
// Use fetchProfileEvent which includes author's relay list for better profile discovery
const profileEvent = await replaceableEventService . fetchProfileEvent ( pubkey , skipCache ) const profileEvent = await Promise . race ( [
replaceableEventService . fetchProfileEvent ( pubkey , skipCache ) ,
timeoutPromise
] )
const fetchTime = Date . now ( ) - startTime const fetchTime = Date . now ( ) - startTime
// Only log at info level if profile was found or if fetch took a long time
// Only log at info level if profile was found or if fetch took a long time
@ -61,7 +188,7 @@ export function useFetchProfile(id?: string, skipCache = false) {
if ( cancelled . current ) { if ( cancelled . current ) {
logger . info ( '[useFetchProfile] Fetch cancelled after fetch' , { pubkey } ) logger . info ( '[useFetchProfile] Fetch cancelled after fetch' , { pubkey } )
return false return null
} }
if ( profileEvent ) { if ( profileEvent ) {
@ -74,19 +201,7 @@ export function useFetchProfile(id?: string, skipCache = false) {
hasAvatar : ! ! newProfile . avatar , hasAvatar : ! ! newProfile . avatar ,
fetchTime : ` ${ fetchTime } ms ` fetchTime : ` ${ fetchTime } ms `
} ) } )
setProfile ( newProfile ) return newProfile
setIsFetching ( false )
// Mark as initialized
initializedPubkeysRef . current . add ( pubkey )
// Keep processingPubkeyRef set so we don't re-fetch
// Clear interval once we have a profile
if ( checkIntervalRef . current ) {
clearInterval ( checkIntervalRef . current )
checkIntervalRef . current = null
}
// Clear run count when profile is found
effectRunCountRef . current . delete ( pubkey )
return true
} }
// Only log warnings for missing profiles if skipCache is true (user explicitly requested)
// Only log warnings for missing profiles if skipCache is true (user explicitly requested)
if ( skipCache ) { if ( skipCache ) {
@ -95,19 +210,69 @@ export function useFetchProfile(id?: string, skipCache = false) {
fetchTime : ` ${ fetchTime } ms ` fetchTime : ` ${ fetchTime } ms `
} ) } )
} }
return false return null
} catch ( err ) { } catch ( err ) {
const isTimeout = err instanceof Error && err . message . includes ( 'timeout' )
if ( isTimeout ) {
logger . warn ( '[useFetchProfile] Profile fetch timed out' , {
pubkey : pubkey.substring ( 0 , 8 ) ,
error : err.message
} )
// Return null on timeout instead of throwing - allows UI to show fallback
return null
}
logger . error ( '[useFetchProfile] Profile fetch error' , { logger . error ( '[useFetchProfile] Profile fetch error' , {
pubkey , pubkey : pubkey.substring ( 0 , 8 ) ,
error : err instanceof Error ? err.message : String ( err ) , error : err instanceof Error ? err.message : String ( err ) ,
stack : err instanceof Error ? err.stack : undefined , stack : err instanceof Error ? err.stack : undefined ,
cancelled : cancelled.current cancelled : cancelled.current
} ) } )
// For non-timeout errors, still throw to allow retry logic
throw err
} finally {
// Clean up global tracking
globalFetchingPubkeys . delete ( pubkey )
// Keep promise in cache for a short time to allow other instances to reuse it
// But remove it immediately on timeout/error to allow retries
setTimeout ( ( ) = > {
globalFetchPromises . delete ( pubkey )
} , 1000 ) // 1 second cache retention
}
} ) ( )
// Store the promise globally so other instances can reuse it
globalFetchPromises . set ( pubkey , fetchPromise )
try {
const profile = await fetchPromise
if ( cancelled . current ) return null
if ( profile ) {
setProfile ( profile )
setIsFetching ( false )
// Mark as initialized
initializedPubkeysRef . current . add ( pubkey )
// Keep processingPubkeyRef set so we don't re-fetch
// Clear interval once we have a profile
if ( checkIntervalRef . current ) {
clearInterval ( checkIntervalRef . current )
checkIntervalRef . current = null
}
// Clear run count when profile is found
effectRunCountRef . current . delete ( pubkey )
return profile
}
if ( ! cancelled . current ) {
setIsFetching ( false )
}
return null
} catch ( err ) {
if ( ! cancelled . current ) { if ( ! cancelled . current ) {
setError ( err as Error ) setError ( err as Error )
setIsFetching ( false ) setIsFetching ( false )
} }
return false return null
} }
} , [ skipCache ] ) } , [ skipCache ] )
@ -289,13 +454,14 @@ export function useFetchProfile(id?: string, skipCache = false) {
setError ( null ) setError ( null )
// Initial fetch - fetchReplaceableEvent checks: 1) in-memory, 2) IndexedDB, 3) network
// Initial fetch - fetchReplaceableEvent checks: 1) in-memory, 2) IndexedDB, 3) network
const found = await checkProfile ( extractedPubkey , cancelled ) // checkProfile now returns the profile directly (or null) and handles global deduplication
const profile = await checkProfile ( extractedPubkey , cancelled )
// Only log if profile was found or if cancelled (important events)
// Only log if profile was found or if cancelled (important events)
if ( found || cancelled . current ) { if ( profile || cancelled . current ) {
logger . debug ( '[useFetchProfile] checkProfile completed' , { logger . debug ( '[useFetchProfile] checkProfile completed' , {
pubkey : extractedPubkey?.substring ( 0 , 8 ) , pubkey : extractedPubkey?.substring ( 0 , 8 ) ,
found , found : ! ! profile ,
cancelled : cancelled.current cancelled : cancelled.current
} ) } )
} }
@ -306,8 +472,9 @@ export function useFetchProfile(id?: string, skipCache = false) {
return return
} }
if ( found ) { if ( profile ) {
// Profile found (from cache or network), we're done
// Profile found (from cache or network), we're done
// checkProfile already set the profile state, so we're done
return return
} }
@ -327,8 +494,24 @@ export function useFetchProfile(id?: string, skipCache = false) {
// This reduces memory usage when many profiles are being fetched (e.g., trending page)
// This reduces memory usage when many profiles are being fetched (e.g., trending page)
let checkCount = 0 let checkCount = 0
const maxChecks = 3 // Reduced from 4 to further reduce load
const maxChecks = 3 // Reduced from 4 to further reduce load
const startTime = Date . now ( )
const maxTotalTime = 20000 // 20 seconds total timeout (3 checks * ~5s + buffer)
checkIntervalRef . current = setInterval ( async ( ) = > { checkIntervalRef . current = setInterval ( async ( ) = > {
// CRITICAL: Check for timeout to prevent infinite retries
const elapsed = Date . now ( ) - startTime
if ( elapsed > maxTotalTime ) {
logger . warn ( '[useFetchProfile] Retry interval timeout reached, stopping retries' , {
pubkey : extractedPubkey?.substring ( 0 , 8 ) ,
elapsed : ` ${ elapsed } ms `
} )
if ( checkIntervalRef . current ) {
clearInterval ( checkIntervalRef . current )
checkIntervalRef . current = null
}
return
}
if ( cancelled . current || checkCount >= maxChecks ) { if ( cancelled . current || checkCount >= maxChecks ) {
if ( checkIntervalRef . current ) { if ( checkIntervalRef . current ) {
clearInterval ( checkIntervalRef . current ) clearInterval ( checkIntervalRef . current )
@ -338,8 +521,8 @@ export function useFetchProfile(id?: string, skipCache = false) {
} }
checkCount ++ checkCount ++
const found = await checkProfile ( extractedPubkey , cancelled ) const profile = await checkProfile ( extractedPubkey , cancelled )
if ( found || cancelled . current ) { if ( profile || cancelled . current ) {
// Profile found or cancelled, stop checking
// Profile found or cancelled, stop checking
if ( checkIntervalRef . current ) { if ( checkIntervalRef . current ) {
clearInterval ( checkIntervalRef . current ) clearInterval ( checkIntervalRef . current )
