Performance improvements: structural sharing & moderation opts context (#3785)

* Fix: correctly apply structural sharing to preferences object

* Move moderation opts into a context

* Fix import

* Remove log

* Pass userdid directly

* Pass moderationPrefs directly

src/state/preferences/moderation-opts.tsx

@@ -0,0 +1,61 @@
+import React, {createContext, useContext, useMemo} from 'react'
+import {BSKY_LABELER_DID, ModerationOpts} from '@atproto/api'
+
+import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
+import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
+import {useSession} from '#/state/session'
+import {usePreferencesQuery} from '../queries/preferences'
+
+export const moderationOptsContext = createContext<ModerationOpts | undefined>(
+  undefined,
+)
+
+// used in the moderation state devtool
+export const moderationOptsOverrideContext = createContext<
+  ModerationOpts | undefined
+>(undefined)
+
+export function useModerationOpts() {
+  return useContext(moderationOptsContext)
+}
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const override = useContext(moderationOptsOverrideContext)
+  const {currentAccount} = useSession()
+  const prefs = usePreferencesQuery()
+  const {labelDefs} = useLabelDefinitions()
+  const hiddenPosts = useHiddenPosts() // TODO move this into pds-stored prefs
+
+  const userDid = currentAccount?.did
+  const moderationPrefs = prefs.data?.moderationPrefs
+  const value = useMemo<ModerationOpts | undefined>(() => {
+    if (override) {
+      return override
+    }
+    if (!moderationPrefs) {
+      return undefined
+    }
+    return {
+      userDid,
+      prefs: {
+        ...moderationPrefs,
+        labelers: moderationPrefs.labelers.length
+          ? moderationPrefs.labelers
+          : [
+              {
+                did: BSKY_LABELER_DID,
+                labels: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
+              },
+            ],
+        hiddenPosts: hiddenPosts || [],
+      },
+      labelDefs,
+    }
+  }, [override, userDid, labelDefs, moderationPrefs, hiddenPosts])
+
+  return (
+    <moderationOptsContext.Provider value={value}>
+      {children}
+    </moderationOptsContext.Provider>
+  )
+}

src/state/queries/actor-autocomplete.ts

@@ -6,7 +6,8 @@ import {isJustAMute} from '#/lib/moderation'
 import {logger} from '#/logger'
 import {STALE} from '#/state/queries'
 import {useAgent} from '#/state/session'
-import {DEFAULT_LOGGED_OUT_PREFERENCES, useModerationOpts} from './preferences'
+import {useModerationOpts} from '../preferences/moderation-opts'
+import {DEFAULT_LOGGED_OUT_PREFERENCES} from './preferences'
 
 const DEFAULT_MOD_OPTS = {
   userDid: undefined,

src/state/queries/notifications/feed.ts

@@ -28,8 +28,8 @@ import {
 
 import {useMutedThreads} from '#/state/muted-threads'
 import {useAgent} from '#/state/session'
+import {useModerationOpts} from '../../preferences/moderation-opts'
 import {STALE} from '..'
-import {useModerationOpts} from '../preferences'
 import {embedViewRecordToPostView, getEmbeddedPost} from '../util'
 import {FeedPage} from './types'
 import {useUnreadNotificationsApi} from './unread'

src/state/queries/notifications/unread.tsx

@@ -13,7 +13,7 @@ import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {useMutedThreads} from '#/state/muted-threads'
 import {useAgent, useSession} from '#/state/session'
-import {useModerationOpts} from '../preferences'
+import {useModerationOpts} from '../../preferences/moderation-opts'
 import {truncateAndInvalidate} from '../util'
 import {RQKEY as RQKEY_NOTIFS} from './feed'
 import {CachedFeedPage, FeedPage} from './types'

src/state/queries/post-feed.ts

@@ -32,7 +32,8 @@ import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip'
 import {BSKY_FEED_OWNER_DIDS} from 'lib/constants'
 import {KnownError} from '#/view/com/posts/FeedErrorMessage'
 import {useFeedTuners} from '../preferences/feed-tuners'
-import {useModerationOpts, usePreferencesQuery} from './preferences'
+import {useModerationOpts} from '../preferences/moderation-opts'
+import {usePreferencesQuery} from './preferences'
 import {embedViewRecordToPostView, getEmbeddedPost} from './util'
 
 type ActorDid = string

src/state/queries/preferences/index.ts

@@ -1,28 +1,24 @@
-import {createContext, useContext, useMemo} from 'react'
 import {
   AppBskyActorDefs,
-  BSKY_LABELER_DID,
   BskyFeedViewPreference,
   LabelPreference,
-  ModerationOpts,
 } from '@atproto/api'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {track} from '#/lib/analytics/analytics'
+import {replaceEqualDeep} from '#/lib/functions'
 import {getAge} from '#/lib/strings/time'
-import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
 import {STALE} from '#/state/queries'
 import {
   DEFAULT_HOME_FEED_PREFS,
   DEFAULT_LOGGED_OUT_PREFERENCES,
   DEFAULT_THREAD_VIEW_PREFS,
 } from '#/state/queries/preferences/const'
-import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
 import {
   ThreadViewPreferences,
   UsePreferencesQueryResponse,
 } from '#/state/queries/preferences/types'
-import {useAgent, useSession} from '#/state/session'
+import {useAgent} from '#/state/session'
 import {saveLabelers} from '#/state/session/agent-config'
 
 export * from '#/state/queries/preferences/const'
@@ -36,7 +32,7 @@ export function usePreferencesQuery() {
   const {getAgent} = useAgent()
   return useQuery({
     staleTime: STALE.SECONDS.FIFTEEN,
-    structuralSharing: true,
+    structuralSharing: replaceEqualDeep,
     refetchOnWindowFocus: true,
     queryKey: preferencesQueryKey,
     queryFn: async () => {
@@ -79,44 +75,6 @@ export function usePreferencesQuery() {
   })
 }
 
-// used in the moderation state devtool
-export const moderationOptsOverrideContext = createContext<
-  ModerationOpts | undefined
->(undefined)
-
-export function useModerationOpts() {
-  const override = useContext(moderationOptsOverrideContext)
-  const {currentAccount} = useSession()
-  const prefs = usePreferencesQuery()
-  const {labelDefs} = useLabelDefinitions()
-  const hiddenPosts = useHiddenPosts() // TODO move this into pds-stored prefs
-  const opts = useMemo<ModerationOpts | undefined>(() => {
-    if (override) {
-      return override
-    }
-    if (!prefs.data) {
-      return
-    }
-    return {
-      userDid: currentAccount?.did,
-      prefs: {
-        ...prefs.data.moderationPrefs,
-        labelers: prefs.data.moderationPrefs.labelers.length
-          ? prefs.data.moderationPrefs.labelers
-          : [
-              {
-                did: BSKY_LABELER_DID,
-                labels: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
-              },
-            ],
-        hiddenPosts: hiddenPosts || [],
-      },
-      labelDefs,
-    }
-  }, [override, currentAccount, labelDefs, prefs.data, hiddenPosts])
-  return opts
-}
-
 export function useClearPreferencesMutation() {
   const queryClient = useQueryClient()
   const {getAgent} = useAgent()

src/state/queries/suggested-follows.ts

@@ -18,11 +18,9 @@ import {
 } from '#/lib/api/feed/utils'
 import {getContentLanguages} from '#/state/preferences/languages'
 import {STALE} from '#/state/queries'
-import {
-  useModerationOpts,
-  usePreferencesQuery,
-} from '#/state/queries/preferences'
+import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useAgent, useSession} from '#/state/session'
+import {useModerationOpts} from '../preferences/moderation-opts'
 
 const suggestedFollowsQueryKeyRoot = 'suggested-follows'
 const suggestedFollowsQueryKey = [suggestedFollowsQueryKeyRoot]