[C-1091] Improve selector performance (#1932)

packages/mobile/package.json

@@ -73,6 +73,7 @@
     "node-libs-react-native": "1.2.1",
     "numeral": "2.0.6",
     "path-dirname": "1.0.2",
+    "proxy-memoize": "1.2.0",
     "query-string": "7.0.1",
     "react": "17.0.2",
     "react-native": "0.66.3",

packages/mobile/src/components/lineup-tile/CollectionTile.tsx

@@ -29,6 +29,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { useCollectionCoverArt } from 'app/hooks/useCollectionCoverArt'
 import { useNavigation } from 'app/hooks/useNavigation'
+import { useProxySelector } from 'app/hooks/useProxySelector'
 
 import { CollectionTileTrackList } from './CollectionTileTrackList'
 import { LineupTile } from './LineupTile'
@@ -49,11 +50,20 @@ const getUserId = accountSelectors.getUserId
 export const CollectionTile = (props: LineupItemProps) => {
   const { uid } = props
 
-  const collection = useSelector((state) => getCollection(state, { uid }))
+  const collection = useProxySelector(
+    (state) => getCollection(state, { uid }),
+    [uid]
+  )
 
-  const tracks = useSelector((state) => getTracksFromCollection(state, { uid }))
+  const tracks = useProxySelector(
+    (state) => getTracksFromCollection(state, { uid }),
+    [uid]
+  )
 
-  const user = useSelector((state) => getUserFromCollection(state, { uid }))
+  const user = useProxySelector(
+    (state) => getUserFromCollection(state, { uid }),
+    [uid]
+  )
 
   if (!collection || !tracks || !user) {
     console.warn(

packages/mobile/src/hooks/useProxySelector.ts

@@ -0,0 +1,19 @@
+import type { DependencyList } from 'react'
+import { useCallback } from 'react'
+
+import type { CommonState } from '@audius/common'
+import memoize from 'proxy-memoize'
+import { useSelector } from 'react-redux'
+
+const createProxySelectorHook = <TState extends object = any>() => {
+  const useProxySelector = <TReturnType>(
+    fn: (state: TState) => TReturnType,
+    deps: DependencyList
+  ): TReturnType => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useSelector(useCallback(memoize(fn), deps))
+  }
+  return useProxySelector
+}
+
+export const useProxySelector = createProxySelectorHook<CommonState>()