perf: runtime re-render, font and first-visit fixes for web and mobile

packages/common/src/api/tan-query/collection/useCollections.ts

@@ -25,31 +25,58 @@ export const useCollections = (
   const queryClient = useQueryClient()
   const dispatch = useDispatch()
 
+  // Callers often pass a new array each render, so key on the ids themselves
+  // to keep the queries below stable.
+  const collectionIdsKey = collectionIds?.join(',')
   const uniqueCollectionIds = useMemo(
     () =>
       collectionIds?.filter(
         (id, index, self) => self.indexOf(id) === index && !!id
       ),
-    [collectionIds]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collectionIdsKey]
+  )
+
+  // Rebuilding these every render makes tanstack re-hash every key and
+  // re-sync every observer, so only rebuild when an input changes.
+  const queries = useMemo(
+    () =>
+      uniqueCollectionIds?.map((collectionId) => ({
+        queryKey: getCollectionQueryKey(collectionId),
+        queryFn: async () => {
+          const sdk = await audiusSdk()
+          return getCollectionQueryFn(
+            collectionId,
+            currentUserId,
+            queryClient,
+            sdk,
+            dispatch
+          )
+        },
+        ...options,
+        ...entityCacheOptions,
+        enabled:
+          options?.enabled !== false && !!collectionId && collectionId > 0
+      })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      uniqueCollectionIds,
+      currentUserId,
+      audiusSdk,
+      queryClient,
+      dispatch,
+      options?.enabled,
+      options?.staleTime,
+      options?.placeholderData,
+      options?.refetchOnMount,
+      options?.throwOnError,
+      options?.refetchInterval,
+      options?.refetchOnWindowFocus
+    ]
   )
 
   const queriesResults = useQueries({
-    queries: uniqueCollectionIds?.map((collectionId) => ({
-      queryKey: getCollectionQueryKey(collectionId),
-      queryFn: async () => {
-        const sdk = await audiusSdk()
-        return getCollectionQueryFn(
-          collectionId,
-          currentUserId,
-          queryClient,
-          sdk,
-          dispatch
-        )
-      },
-      ...options,
-      ...entityCacheOptions,
-      enabled: options?.enabled !== false && !!collectionId && collectionId > 0
-    })),
+    queries,
     combine: combineQueryResults<TQCollection[]>
   })
 

packages/common/src/api/tan-query/lineups/useExclusiveTracks.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { EntityType, OptionalId } from '@audius/sdk'
 import {
   InfiniteData,
@@ -13,7 +15,7 @@ import { ID } from '~/models/Identifiers'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, LineupData, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { useLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeTrackData } from '../utils/primeTrackData'
 
 const DEFAULT_PAGE_SIZE = 10
@@ -89,10 +91,14 @@ export const useExclusiveTracks = (
     enabled: options?.enabled !== false && !!userId
   })
 
-  const data = query.data ?? []
-  const trackIds = data
-    .filter((d) => d.type === EntityType.TRACK)
-    .map((d) => d.id as ID)
+  const data = useMemo(() => query.data ?? [], [query.data])
+  const trackIds = useMemo(
+    () =>
+      data.filter((d) => d.type === EntityType.TRACK).map((d) => d.id as ID),
+    [data]
+  )
+
+  const loadNextPage = useLoadNextPage(query)
 
   return {
     // Raw data
@@ -108,7 +114,7 @@ export const useExclusiveTracks = (
     isInitialLoading: query.isInitialLoading,
     hasNextPage: query.hasNextPage,
     fetchNextPage: query.fetchNextPage,
-    loadNextPage: makeLoadNextPage(query),
+    loadNextPage,
 
     // Identity
     queryKey

packages/common/src/api/tan-query/lineups/useFeed.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { EntityType, Id, type GetUserFeedFilterEnum } from '@audius/sdk'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
 
@@ -14,7 +16,7 @@ import { Nullable } from '~/utils/typeUtils'
 import { QUERY_KEYS } from '../queryKeys'
 import { LineupData, QueryKey, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { useLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeCollectionData } from '../utils/primeCollectionData'
 import { primeTrackData } from '../utils/primeTrackData'
 
@@ -126,10 +128,14 @@ export const useFeed = (
     enabled: options?.enabled !== false && currentUserId != null
   })
 
-  const data = query.data ?? []
-  const trackIds = data
-    .filter((d) => d.type === EntityType.TRACK)
-    .map((d) => d.id as ID)
+  const data = useMemo(() => query.data ?? [], [query.data])
+  const trackIds = useMemo(
+    () =>
+      data.filter((d) => d.type === EntityType.TRACK).map((d) => d.id as ID),
+    [data]
+  )
+
+  const loadNextPage = useLoadNextPage(query)
 
   return {
     data,
@@ -142,7 +148,7 @@ export const useFeed = (
     isInitialLoading: query.isInitialLoading,
     hasNextPage: query.hasNextPage,
     fetchNextPage: query.fetchNextPage,
-    loadNextPage: makeLoadNextPage(query),
+    loadNextPage,
     refetch: query.refetch,
     queryKey
   }

packages/common/src/api/tan-query/lineups/useForYouFeed.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { EntityType, Id } from '@audius/sdk'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
 
@@ -8,7 +10,7 @@ import { ID, UserCollectionMetadata, UserTrackMetadata } from '~/models'
 import { QUERY_KEYS } from '../queryKeys'
 import { LineupData, QueryKey, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { useLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeCollectionData } from '../utils/primeCollectionData'
 import { primeTrackData } from '../utils/primeTrackData'
 
@@ -102,16 +104,20 @@ export const useForYouFeed = (
     enabled: options?.enabled !== false && currentUserId != null
   })
 
-  const data = query.data ?? []
-  const trackIds = data
-    .filter((d) => d.type === EntityType.TRACK)
-    .map((d) => d.id as ID)
+  const data = useMemo(() => query.data ?? [], [query.data])
+  const trackIds = useMemo(
+    () =>
+      data.filter((d) => d.type === EntityType.TRACK).map((d) => d.id as ID),
+    [data]
+  )
 
   // When the query is disabled, react-query keeps isPending/isLoading true
   // (data is undefined). Surface them as false so consumers can render an
   // empty state instead of an indefinite loading state.
   const isDisabled = currentUserId == null || options?.enabled === false
 
+  const loadNextPage = useLoadNextPage(query)
+
   return {
     data,
     trackIds,
@@ -123,7 +129,7 @@ export const useForYouFeed = (
     isInitialLoading: isDisabled ? false : query.isInitialLoading,
     hasNextPage: query.hasNextPage,
     fetchNextPage: query.fetchNextPage,
-    loadNextPage: makeLoadNextPage(query),
+    loadNextPage,
     refetch: query.refetch,
     queryKey
   }

packages/common/src/api/tan-query/lineups/useLibraryTracks.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import {
   Id,
   EntityType,
@@ -19,7 +21,7 @@ import { userTrackMetadataFromSDK } from '../../../adapters/track'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, QueryOptions, LineupData } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { useLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeTrackData } from '../utils/primeTrackData'
 
 const DEFAULT_PAGE_SIZE = 5
@@ -121,10 +123,14 @@ export const useLibraryTracks = (
     enabled: config?.enabled !== false && !!currentUserId
   })
 
-  const data = queryData.data ?? []
-  const trackIds = data
-    .filter((d) => d.type === EntityType.TRACK)
-    .map((d) => d.id as ID)
+  const data = useMemo(() => queryData.data ?? [], [queryData.data])
+  const trackIds = useMemo(
+    () =>
+      data.filter((d) => d.type === EntityType.TRACK).map((d) => d.id as ID),
+    [data]
+  )
+
+  const loadNextPage = useLoadNextPage(queryData)
 
   return {
     data,
@@ -138,7 +144,7 @@ export const useLibraryTracks = (
     isInitialLoading: queryData.isInitialLoading,
     hasNextPage: queryData.hasNextPage,
     fetchNextPage: queryData.fetchNextPage,
-    loadNextPage: makeLoadNextPage(queryData),
+    loadNextPage,
     queryKey,
     pageSize
   }

packages/common/src/api/tan-query/lineups/usePremiumTracks.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { OptionalId, EntityType } from '@audius/sdk'
 import {
   InfiniteData,
@@ -13,7 +15,7 @@ import { ID } from '~/models/Identifiers'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, LineupData, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { useLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeTrackData } from '../utils/primeTrackData'
 
 const DEFAULT_PAGE_SIZE = 10
@@ -68,10 +70,14 @@ export const usePremiumTracks = (
     enabled: options?.enabled !== false
   })
 
-  const data = query.data ?? []
-  const trackIds = data
-    .filter((d) => d.type === EntityType.TRACK)
-    .map((d) => d.id as ID)
+  const data = useMemo(() => query.data ?? [], [query.data])
+  const trackIds = useMemo(
+    () =>
+      data.filter((d) => d.type === EntityType.TRACK).map((d) => d.id as ID),
+    [data]
+  )
+
+  const loadNextPage = useLoadNextPage(query)
 
   return {
     data,
@@ -84,7 +90,7 @@ export const usePremiumTracks = (
     isInitialLoading: query.isInitialLoading,
     hasNextPage: query.hasNextPage,
     fetchNextPage: query.fetchNextPage,
-    loadNextPage: makeLoadNextPage(query),
+    loadNextPage,
     queryKey
   }
 }

packages/common/src/api/tan-query/lineups/useProfileReposts.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { EntityType, OptionalId } from '@audius/sdk'
 import {
   InfiniteData,
@@ -12,7 +14,7 @@ import { UserTrackMetadata, UserCollectionMetadata, ID } from '~/models'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, LineupData, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { useLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeCollectionData } from '../utils/primeCollectionData'
 import { primeTrackData } from '../utils/primeTrackData'
 
@@ -102,10 +104,14 @@ export const useProfileReposts = (
     enabled: options?.enabled !== false && !!handle
   })
 
-  const data = query.data ?? []
-  const trackIds = data
-    .filter((d) => d.type === EntityType.TRACK)
-    .map((d) => d.id as ID)
+  const data = useMemo(() => query.data ?? [], [query.data])
+  const trackIds = useMemo(
+    () =>
+      data.filter((d) => d.type === EntityType.TRACK).map((d) => d.id as ID),
+    [data]
+  )
+
+  const loadNextPage = useLoadNextPage(query)
 
   return {
     data,
@@ -118,7 +124,7 @@ export const useProfileReposts = (
     isInitialLoading: query.isInitialLoading,
     hasNextPage: query.hasNextPage,
     fetchNextPage: query.fetchNextPage,
-    loadNextPage: makeLoadNextPage(query),
+    loadNextPage,
     refetch: query.refetch,
     queryKey
   }

packages/common/src/api/tan-query/lineups/useProfileTracks.ts

@@ -1,3 +1,5 @@
+import { useMemo } from 'react'
+
 import { EntityType, OptionalId } from '@audius/sdk'
 import {
   InfiniteData,
@@ -13,7 +15,7 @@ import { TracksSortMode } from '~/store/pages/profile/types'
 import { QUERY_KEYS } from '../queryKeys'
 import { QueryKey, LineupData, QueryOptions } from '../types'
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-import { makeLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
+import { useLoadNextPage } from '../utils/infiniteQueryLoadNextPage'
 import { primeTrackData } from '../utils/primeTrackData'
 
 const DEFAULT_PAGE_SIZE = 10
@@ -96,10 +98,14 @@ export const useProfileTracks = (
     enabled: options?.enabled !== false && !!handle
   })
 
-  const data = query.data ?? []
-  const trackIds = data
-    .filter((d) => d.type === EntityType.TRACK)
-    .map((d) => d.id as ID)
+  const data = useMemo(() => query.data ?? [], [query.data])
+  const trackIds = useMemo(
+    () =>
+      data.filter((d) => d.type === EntityType.TRACK).map((d) => d.id as ID),
+    [data]
+  )
+
+  const loadNextPage = useLoadNextPage(query)
 
   return {
     data,
@@ -112,7 +118,7 @@ export const useProfileTracks = (
     isInitialLoading: query.isInitialLoading,
     hasNextPage: query.hasNextPage,
     fetchNextPage: query.fetchNextPage,
-    loadNextPage: makeLoadNextPage(query),
+    loadNextPage,
     refetch: query.refetch,
     queryKey
   }