From 4ebc0a646e05a76e545a8283ffc29378b3b03a20 Mon Sep 17 00:00:00 2001
From: Doma <leishenghao@126.com>
Date: Sat, 15 Apr 2023 15:30:49 +0800
Subject: [PATCH] perf: prevent unnecessary rerender of Playlist

---
 src/components/player.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/player.tsx b/src/components/player.tsx
index 636e993..24e17b7 100644
--- a/src/components/player.tsx
+++ b/src/components/player.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import cx from "clsx";
 
 import { ReactComponent as IconPlay } from "../assets/play.svg";
@@ -93,6 +93,16 @@ export function APlayer({
   const [isPlaylistOpen, setPlaylistOpen] = useState(() => hasPlaylist);
 
   const themeColor = useThemeColor(playlist.currentSong, theme);
+  const playlistAudioProp = useMemo(
+    () => (Array.isArray(audio) ? audio : [audio]),
+    [audio]
+  );
+
+  const { prioritize } = playlist;
+  const handlePlayAudioFromList = useCallback(
+    (audioInfo: AudioInfo) => prioritize(audioInfo),
+    [prioritize]
+  );
 
   return (
     <div
@@ -157,9 +167,9 @@ export function APlayer({
         <Playlist
           themeColor={themeColor}
           open={isPlaylistOpen}
-          audio={Array.isArray(audio) ? audio : [audio]}
+          audio={playlistAudioProp}
           playingAudioUrl={playlist.currentSong.url}
-          onPlayAudio={(audioInfo) => playlist.prioritize(audioInfo)}
+          onPlayAudio={handlePlayAudioFromList}
         />
       ) : null}
     </div>