refactor: optimize useSelectedTags hook by consolidating user preferences retrieval

Author: medyo

src/features/cards/hooks/useSelectedTags.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { useUserPreferences } from 'src/stores/preferences'
+import { useShallow } from 'zustand/shallow'
 import { MY_LANGUAGES_OPTION } from '../config'
 
 type useSelectedTagsProps = {
@@ -10,27 +11,41 @@ type useSelectedTagsProps = {
   }
 }
 export const useSelectedTags = ({ source, fallbackTag }: useSelectedTagsProps) => {
-  const cardSettings = useUserPreferences((state) => state.cardsSettings?.[source])
-  const { userSelectedTags } = useUserPreferences()
-
+  const { cardSettings, userSelectedTags } = useUserPreferences(
+    useShallow((state) => {
+      return {
+        cardSettings: state.cardsSettings?.[source],
+        userSelectedTags: state.userSelectedTags,
+      }
+    })
+  )
+  const { language } = cardSettings || {}
   const selectedTags = useMemo(() => {
-    if (!cardSettings?.language) {
+    if (!language || (language === MY_LANGUAGES_OPTION.value && userSelectedTags.length === 0)) {
       return [fallbackTag]
     }
 
-    if (cardSettings.language === MY_LANGUAGES_OPTION.value) {
+    if (language === MY_LANGUAGES_OPTION.value) {
       return userSelectedTags
     }
-    return [userSelectedTags.find((lang) => lang.value === cardSettings?.language) || fallbackTag]
-  }, [userSelectedTags, cardSettings])
+    return [userSelectedTags.find((lang) => lang.value === language) || fallbackTag]
+  }, [userSelectedTags, language])
+
+  const selectedTag = useMemo(() => {
+    return language
+      ? [MY_LANGUAGES_OPTION, ...userSelectedTags].find((lang) => lang.value === language) ||
+          fallbackTag
+      : fallbackTag
+  }, [language, userSelectedTags])
+
+  const queryTags = useMemo(() => {
+    return selectedTags.map((tag) => tag.value)
+  }, [selectedTags])
 
   return {
-    queryTags: selectedTags,
-    selectedTag: cardSettings?.language
-      ? [MY_LANGUAGES_OPTION, ...userSelectedTags].find(
-          (lang) => lang.value === cardSettings.language
-        ) || fallbackTag
-      : fallbackTag,
+    selectedTags,
+    queryTags,
+    selectedTag,
     cardSettings,
   }
 }