refactor: optimize CardHeader and CardSettings components for improved performance and readability

Author: medyo

src/features/cards/components/CardHeader.tsx

@@ -1,3 +1,4 @@
+import { memo, useMemo } from 'react'
 import { MY_LANGUAGES_OPTION } from '../config'
 
 type HeaderTitleProps = {
@@ -12,27 +13,23 @@ type HeaderTitleProps = {
   }
   children?: React.ReactNode
 }
-export const CardHeader = ({ label, fallbackTag, selectedTag, children }: HeaderTitleProps) => {
+const CardHeader = ({ label, fallbackTag, selectedTag, children }: HeaderTitleProps) => {
   if (children) {
     return <>{children}</>
   }
 
-  if (!selectedTag || selectedTag.value === fallbackTag.value) {
-    return <>{label}</>
-  }
-
-  if (selectedTag.value === MY_LANGUAGES_OPTION.value) {
-    return (
-      <>
-        {label} <span className="blockHeaderHighlight">{MY_LANGUAGES_OPTION.label}</span>
-      </>
-    )
-  }
+  const highlightLabel = useMemo(() => {
+    if (!selectedTag || selectedTag.value === fallbackTag.value) return null
+    if (selectedTag.value === MY_LANGUAGES_OPTION.value) return MY_LANGUAGES_OPTION.label
+    return selectedTag.label
+  }, [selectedTag, fallbackTag])
 
   return (
     <>
       {label}
-      <span className="blockHeaderHighlight">{selectedTag.label}</span>
+      {highlightLabel && <span className="blockHeaderHighlight">{highlightLabel}</span>}
     </>
   )
 }
+
+export const MemoizedCardHeader = memo(CardHeader)

src/features/cards/components/CardSettings.tsx

@@ -1,13 +1,16 @@
 import { Menu, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu'
-import { useCallback, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import { AiOutlineCode } from 'react-icons/ai'
 import { BsBoxArrowInUpRight } from 'react-icons/bs'
+import { FiFilter } from 'react-icons/fi'
 import { GoGear } from 'react-icons/go'
 import { IoTrashBinOutline } from 'react-icons/io5'
 import { LiaSortSolid } from 'react-icons/lia'
 import { MdDateRange } from 'react-icons/md'
+import { useMediaQuery } from 'react-responsive'
 import { ref } from 'src/config'
 import { useUserPreferences } from 'src/stores/preferences'
+import { useShallow } from 'zustand/shallow'
 import { MY_LANGUAGES_OPTION } from '../config'
 
 type SortOption = { label: string; value: string; icon?: React.ReactNode }
@@ -27,7 +30,7 @@ type CardSettingsProps = {
 const DEFAULT_SORT_OPTIONS = [{ label: 'Newest', value: 'published_at', icon: <MdDateRange /> }]
 const SPECIAL_LABELS = ['global', MY_LANGUAGES_OPTION.label.toLowerCase()]
 
-export const CardSettings = ({
+const CardSettings = ({
   id,
   url,
   sortBy,
@@ -38,30 +41,34 @@ export const CardSettings = ({
   customStartMenuItems,
   sortOptions,
 }: CardSettingsProps) => {
-  const userSelectedTags = useUserPreferences((state) => state.userSelectedTags)
-  const openLinksNewTab = useUserPreferences((state) => state.openLinksNewTab)
-  const removeCard = useUserPreferences((state) => state.removeCard)
-  const setCardSettings = useUserPreferences((state) => state.setCardSettings)
-  const cardSettings = useUserPreferences((state) => state.cardsSettings[id])
+  const { userSelectedTags, openLinksNewTab, removeCard, setCardSettings, cardSettings } =
+    useUserPreferences(
+      useShallow((state) => ({
+        userSelectedTags: state.userSelectedTags,
+        openLinksNewTab: state.openLinksNewTab,
+        removeCard: state.removeCard,
+        setCardSettings: state.setCardSettings,
+        cardSettings: state.cardsSettings?.[id],
+      }))
+    )
 
   const userTagsMemo = useMemo(() => {
-    const newTags = userSelectedTags.sort((a, b) => a.label.localeCompare(b.label))
-    let tags = [...newTags]
-    if (globalTag) {
-      tags = [...tags, globalTag]
-    }
-
-    tags = [...tags, MY_LANGUAGES_OPTION]
+    const tags = [...userSelectedTags]
+      .sort((a, b) => a.label.localeCompare(b.label))
+      .concat(globalTag ? [globalTag] : [])
+      .concat(MY_LANGUAGES_OPTION)
     return tags
   }, [userSelectedTags, globalTag])
 
-  const resolvedSortOptions =
-    typeof sortOptions === 'function'
+  const resolvedSortOptions = useMemo(() => {
+    return typeof sortOptions === 'function'
       ? sortOptions(DEFAULT_SORT_OPTIONS)
       : sortOptions || DEFAULT_SORT_OPTIONS
+  }, [sortOptions])
 
   const onOpenSourceUrlClicked = useCallback(() => {
-    let link = `${url}?${ref}`
+    if (!url) return
+    const link = `${url}?${ref}`
     window.open(link, openLinksNewTab ? '_blank' : '_self')
   }, [url, openLinksNewTab])
 
@@ -70,9 +77,12 @@ export const CardSettings = ({
     [userTagsMemo]
   )
 
+  const isMobile = useMediaQuery({ maxWidth: 767 })
+  const menuIcon = isMobile ? <FiFilter /> : <GoGear />
+
   return (
     <Menu
-      menuButton={<GoGear />}
+      menuButton={menuIcon}
       theming="dark"
       portal={true}
       className={`menuItem`}
@@ -144,3 +154,5 @@ export const CardSettings = ({
     </Menu>
   )
 }
+
+export const MemoizedCardSettings = memo(CardSettings)