diff --git a/lib/hooks/ens-cache.js b/lib/hooks/ens-cache.js --- a/lib/hooks/ens-cache.js +++ b/lib/hooks/ens-cache.js @@ -11,9 +11,6 @@ function useStringForUser( user: ?(RelativeUserInfo | RelativeMemberInfo), ): ?string { - const rawStringForUser = user ? stringForUser(user) : null; - const [ensName, setENSName] = React.useState(null); - const ethAddress = React.useMemo(() => { if ( !user || @@ -26,15 +23,22 @@ return user.username; }, [user]); + const cacheContext = React.useContext(ENSCacheContext); + const { ensCache } = cacheContext; + const cachedResult = + ethAddress && ensCache + ? ensCache.getCachedNameForAddress(ethAddress) + : null; + + const [ensName, setENSName] = React.useState(null); + React.useEffect(() => { // Whenever the ETH address changes, clear out ENS name before requery below setENSName(null); }, [ethAddress]); - const cacheContext = React.useContext(ENSCacheContext); - const { ensCache } = cacheContext; React.useEffect(() => { - if (!ethAddress || !ensCache) { + if (cachedResult || !ethAddress || !ensCache) { return; } let cancelled = false; @@ -47,9 +51,17 @@ return () => { cancelled = true; }; - }, [ethAddress, ensCache]); + }, [cachedResult, ethAddress, ensCache]); - return ensName ?? rawStringForUser; + if (ensName) { + return ensName; + } else if (cachedResult) { + return cachedResult; + } else if (user) { + return stringForUser(user); + } else { + return null; + } } export { useStringForUser };