Remove redundant useProfileByUserId calls in VoteCommentRow: use avatars from comment data and avoid excessive profile lookups. Optimize useProfileByUserId with deduplication for concurrent requests.

Author: MartinBraquet

web/components/votes/vote-comments.tsx

@@ -24,7 +24,6 @@ import {Tooltip} from 'web/components/widgets/tooltip'
 import {UserLink} from 'web/components/widgets/user-link'
 import {useAdmin} from 'web/hooks/use-admin'
 import {useEvent} from 'web/hooks/use-event'
-import {useProfileByUserId} from 'web/hooks/use-profile'
 import {useUser} from 'web/hooks/use-user'
 import {api} from 'web/lib/api'
 import {firebaseLogin} from 'web/lib/firebase/users'
@@ -336,6 +335,10 @@ function VoteCommentThread(props: {
   )
 }
 
+// Renders from the denormalized author columns on the comment row and fetches nothing. It used to
+// call useProfileByUserId for `pinned_url`, which on a thread of 28 comments meant 28 profile
+// lookups — 112 requests, all for the same handful of people — to slightly freshen an avatar the
+// comment row already carries. A stale avatar on an old comment is the right trade.
 const VoteCommentRow = memo(function VoteCommentRow(props: {
   comment: VoteComment
   choice: number | undefined
@@ -348,7 +351,6 @@ const VoteCommentRow = memo(function VoteCommentRow(props: {
   const ref = useRef<HTMLDivElement>(null)
   const [comment, setComment] = useState(props.comment)
   const {userUsername, userAvatarUrl, userId, hidden} = comment
-  const profile = useProfileByUserId(userId)
   const t = useT()
 
   useEffect(() => {
@@ -367,7 +369,7 @@ const VoteCommentRow = memo(function VoteCommentRow(props: {
           <Avatar
             username={userUsername}
             size={isParent ? 'sm' : '2xs'}
-            avatarUrl={profile?.pinned_url ?? userAvatarUrl}
+            avatarUrl={userAvatarUrl}
           />
           {/* The spine starts at the bottom of the parent avatar rather than the top of the row.
               Avatar puts its className on the <img>, which is position:static, so a `z-10` there is

web/hooks/use-profile.tsx

@@ -82,19 +82,29 @@ export const useProfileByUser = (user: User | undefined) => {
   return {profile, refreshProfile}
 }
 
+// In-flight requests, keyed by user id. `usePersistentInMemoryState` already shares the *result*
+// between components asking for the same profile, but nothing stopped them all firing the request:
+// N components mounting together produced N identical lookups, and each lookup is four round trips
+// (profile plus interests, causes and work). Same idea as `useGetter`'s cache, one layer down.
+const profilePromises: Record<string, Promise<ProfileWithoutUser | null> | undefined> = {}
+
 export const useProfileByUserId = (userId: string | undefined) => {
   const [profile, setProfile] = usePersistentInMemoryState<ProfileWithoutUser | undefined | null>(
     undefined,
     `profile-${userId}`,
   )
 
   useEffect(() => {
-    // console.debug('Refreshing profile in useProfileByUserId for', userId, profile);
-    if (userId)
-      getProfileRowWithFrontendSupabase(userId, db).then((profile) => {
-        if (!profile) setProfile(null)
-        else setProfile(profile)
-      })
+    if (!userId) return
+    const pending =
+      profilePromises[userId] ??
+      (profilePromises[userId] = getProfileRowWithFrontendSupabase(userId, db).finally(() => {
+        // Cleared once settled, so this dedupes concurrent callers without becoming a cache that
+        // never refreshes — a later mount still refetches, as it did before.
+        delete profilePromises[userId]
+      }))
+
+    pending.then((profile) => setProfile(profile ?? null))
   }, [userId])
 
   return profile