perf: improve performance

packages/web/pages/Artist/ArtistSongs.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 import useArtistSongs from '@/web/api/hooks/useArtistSongs'
 import useTracks from '@/web/api/hooks/useTracks'
 import { FetchArtistSongsParams } from '@/shared/api/Artist'
@@ -8,9 +8,8 @@ import { useParams } from 'react-router-dom'
 import ScrollPagination from '@/web/components/ScrollPage'
 import { fetchArtistSongs } from '@/web/api/artist'
 import { fetchTracks } from '@/web/api/track'
-import toast from 'react-hot-toast'
 
-const ArtistSongs = () => {
+const ArtistSongs = memo(() => {
   const [dataSource, setDatasource] = useState<Track[]>([])
   const [songIDs, setSongIDs] = useState<number[]>([])
   const params = useParams()
@@ -54,6 +53,6 @@ const ArtistSongs = () => {
       <ScrollPagination getData={getData} renderItems={renderItems} />
     </div>
   )
-}
+})
 
 export default ArtistSongs

packages/web/pages/Artist/ArtistVideos.tsx

@@ -2,8 +2,9 @@ import { useParams } from 'react-router-dom'
 import useArtistMV from '@/web/api/hooks/useArtistMV'
 import { useTranslation } from 'react-i18next'
 import uiStates from '@/web/states/uiStates'
+import { memo } from 'react'
 
-const ArtistVideos = () => {
+const ArtistVideos = memo(() => {
   const { t } = useTranslation()
   const params = useParams()
   const { data: videos } = useArtistMV({ id: Number(params.id) || 0 })
@@ -31,6 +32,6 @@ const ArtistVideos = () => {
       </div>
     </div>
   )
-}
+})
 
 export default ArtistVideos

packages/web/pages/Browse/Browse.tsx

@@ -1,14 +1,7 @@
 import Tabs from '@/web/components/Tabs'
-import { fetchDailyRecommendPlaylists, fetchRecommendedPlaylists } from '@/web/api/playlist'
-import { PlaylistApiNames } from '@/shared/api/Playlists'
 import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import CoverRowVirtual from '@/web/components/CoverRowVirtual'
 import PageTransition from '@/web/components/PageTransition'
-import { playerWidth, topbarHeight } from '@/web/utils/const'
 import { cx, css } from '@emotion/css'
-import CoverRow from '@/web/components/CoverRow'
-import topbarBackground from '@/web/assets/images/topbar-background.png'
 import Recommend from './Recommend'
 import Top from './Top'
 import Hot from './Hot'