Memoize the memoizers

src/lib/moderation/useModerationCauseDescription.ts

@@ -1,3 +1,4 @@
+import React from 'react'
 import {ModerationCause, ModerationCauseSource} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -25,6 +26,8 @@ export function useModerationCauseDescription(
   const {_, i18n} = useLingui()
   const globalLabelStrings = useGlobalLabelStrings()
   const {labelDefs, labelers} = useLabelDefinitions()
+
+  return React.useMemo(() => {
     if (!cause) {
       return {
         icon: Warning,
@@ -117,7 +120,9 @@ export function useModerationCauseDescription(
         description: strings.description,
         source:
           labeler?.creator.displayName ||
-        (labeler?.creator.handle ? '@' + labeler?.creator.handle : undefined) ||
+          (labeler?.creator.handle
+            ? '@' + labeler?.creator.handle
+            : undefined) ||
           cause.label.src,
         sourceType: cause.source.type,
       }
@@ -128,4 +133,5 @@ export function useModerationCauseDescription(
       name: '',
       description: ``,
     }
+  }, [labelDefs, labelers, globalLabelStrings, cause, _, i18n.locale])
 }

src/state/queries/preferences/moderation.ts

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
   DEFAULT_LABEL_SETTINGS,
   BskyAgent,
@@ -25,15 +26,20 @@ export function useMyLabelers() {
     ),
   )
   const labelers = useLabelersDetailedInfoQuery({dids})
+  const isLoading = prefs.isLoading || labelers.isLoading
+  const error = prefs.error || labelers.error
+  return React.useMemo(() => {
     return {
-    isLoading: prefs.isLoading || labelers.isLoading,
+      isLoading,
-    error: prefs.error || labelers.error,
+      error,
       data: labelers.data,
     }
+  }, [labelers, isLoading, error])
 }
 
 export function useLabelDefinitions() {
   const labelers = useMyLabelers()
+  return React.useMemo(() => {
     return {
       labelDefs: Object.fromEntries(
         (labelers.data || []).map(labeler => [
@@ -43,4 +49,5 @@ export function useLabelDefinitions() {
       ),
       labelers: labelers.data || [],
     }
+  }, [labelers])
 }