optimize various base components

src/renderer/features/songs/components/jellyfin-song-filters.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -105,8 +105,8 @@ export const JellyfinSongFilters = () => {
     const debouncedHandleMinYearFilter = useDebouncedCallback(handleMinYearFilter, 300);
     const debouncedHandleMaxYearFilter = useDebouncedCallback(handleMaxYearFilter, 300);
 
-    const handleGenresFilter = useMemo(
-        () => (e: string[] | undefined) => {
+    const handleGenresFilter = useCallback(
+        (e: null | string[]) => {
             setCustom((prev) => {
                 const current = prev ?? {};
 
@@ -129,9 +129,9 @@ export const JellyfinSongFilters = () => {
         [setCustom],
     );
 
-    const handleTagFilter = useMemo(
-        () => (e: string[] | undefined) => {
-            setCustom({ Tags: e?.join('|') ?? null });
+    const handleTagFilter = useCallback(
+        (e: null | string[]) => {
+            setCustom({ Tags: e && e.length > 0 ? e.join('|') : null });
         },
         [setCustom],
     );
@@ -173,7 +173,7 @@ export const JellyfinSongFilters = () => {
                     data={genreList}
                     defaultValue={selectedGenres}
                     label={t('entity.genre', { count: 1, postProcess: 'sentenceCase' })}
-                    onChange={(e) => handleGenresFilter(e)}
+                    onChange={handleGenresFilter}
                     searchable
                 />
             )}
@@ -183,7 +183,7 @@ export const JellyfinSongFilters = () => {
                     data={tagsQuery.data.boolTags}
                     defaultValue={selectedTags}
                     label={t('common.tags', { postProcess: 'sentenceCase' })}
-                    onChange={(e) => handleTagFilter(e)}
+                    onChange={handleTagFilter}
                     searchable
                 />
             )}

src/renderer/features/songs/components/navidrome-song-filters.tsx

@@ -1,5 +1,5 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -73,6 +73,17 @@ export const NavidromeSongFilters = () => {
 
     const debouncedHandleYearFilter = useDebouncedCallback(handleYearFilter, 300);
 
+    const handleGenreChange = useCallback(
+        (e: null | string[]) => {
+            if (e && e.length > 0) {
+                setGenreId(e);
+            } else {
+                setGenreId(null);
+            }
+        },
+        [setGenreId],
+    );
+
     return (
         <Stack px="md" py="md">
             {yesNoUndefinedFilters.map((filter) => (
@@ -99,7 +110,7 @@ export const NavidromeSongFilters = () => {
                     data={genreList}
                     defaultValue={query.genreIds || []}
                     label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
-                    onChange={(e) => (e && e.length > 0 ? setGenreId(e) : setGenreId(null))}
+                    onChange={handleGenreChange}
                     searchable
                 />
             )}
@@ -132,6 +143,17 @@ const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterI
         return Array.isArray(value) ? value : [value];
     }, [value]);
 
+    const handleChange = useCallback(
+        (e: null | string[]) => {
+            if (e && e.length > 0) {
+                onChange(e);
+            } else {
+                onChange(null);
+            }
+        },
+        [onChange],
+    );
+
     return (
         <MultiSelectWithInvalidData
             clearable
@@ -140,7 +162,7 @@ const TagFilterItem = ({ label, onChange, options, tagValue, value }: TagFilterI
             key={tagValue}
             label={label}
             limit={100}
-            onChange={(e) => (e && e.length > 0 ? onChange(e) : onChange(null))}
+            onChange={handleChange}
             searchable
         />
     );

src/renderer/features/songs/components/subsonic-song-filters.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useMemo } from 'react';
+import { ChangeEvent, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
@@ -29,8 +29,8 @@ export const SubsonicSongFilters = () => {
         }));
     }, [genreListQuery.data]);
 
-    const handleGenresFilter = useMemo(
-        () => (e: null | string) => {
+    const handleGenresFilter = useCallback(
+        (e: null | string) => {
             setGenreId(e ? [e] : null);
         },
         [setGenreId],