Use memoization to avoid re-renders

ui/src/audioplayer/Player.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { useAuthState, useDataProvider, useTranslate } from 'react-admin'
@@ -23,13 +23,16 @@ const Player = () => {
   const theme = themes[currentTheme] || themes.DarkTheme
   const playerTheme = (theme.player && theme.player.theme) || 'dark'
 
-  const audioTitle = (audioInfo) => (
+  const audioTitle = useCallback(
-    <Link
+    (audioInfo) => (
-      to={`/album/${audioInfo.albumId}/show`}
+      <Link
-      className={classes.audioTitle}
+        to={`/album/${audioInfo.albumId}/show`}
-    >
+        className={classes.audioTitle}
-      {audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''}
+      >
-    </Link>
+        {audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''}
+      </Link>
+    ),
+    [classes.audioTitle]
   )
 
   const defaultOptions = {
@@ -80,56 +83,70 @@ const Player = () => {
     },
   }
 
-  const addQueueToOptions = (queue) => {
+  const dataProvider = useDataProvider()
+  const dispatch = useDispatch()
+  const queue = useSelector((state) => state.queue)
+  const { authenticated } = useAuthState()
+
+  const options = useMemo(() => {
     return {
       ...defaultOptions,
       clearPriorAudioLists: queue.clear,
       audioLists: queue.queue.map((item) => item),
     }
-  }
+  }, [queue.clear, queue.queue, defaultOptions])
 
-  const dataProvider = useDataProvider()
+  const OnAudioListsChange = useCallback(
-  const dispatch = useDispatch()
+    (currentPlayIndex, audioLists) => {
-  const queue = useSelector((state) => state.queue)
+      dispatch(syncQueue(currentPlayIndex, audioLists))
-  const options = addQueueToOptions(queue)
+    },
-  const { authenticated } = useAuthState()
+    [dispatch]
+  )
 
-  const OnAudioListsChange = (currentPlayIndex, audioLists) => {
+  const OnAudioProgress = useCallback(
-    dispatch(syncQueue(currentPlayIndex, audioLists))
+    (info) => {
-  }
+      if (info.ended) {
+        document.title = 'Navidrome'
+      }
+      const progress = (info.currentTime / info.duration) * 100
+      if (isNaN(info.duration) || progress < 90) {
+        return
+      }
+      const item = queue.queue.find((item) => item.trackId === info.trackId)
+      if (item && !item.scrobbled) {
+        dispatch(scrobble(info.trackId, true))
+        subsonic.scrobble(info.trackId, true)
+      }
+    },
+    [dispatch, queue.queue]
+  )
 
-  const OnAudioProgress = (info) => {
+  const OnAudioPlay = useCallback(
-    if (info.ended) {
+    (info) => {
-      document.title = 'Navidrome'
+      dispatch(currentPlaying(info))
-    }
+      if (info.duration) {
-    const progress = (info.currentTime / info.duration) * 100
+        document.title = `${info.name} - ${info.singer} - Navidrome`
-    if (isNaN(info.duration) || progress < 90) {
+        dispatch(scrobble(info.trackId, false))
-      return
+        subsonic.scrobble(info.trackId, false)
-    }
+      }
-    const item = queue.queue.find((item) => item.trackId === info.trackId)
+    },
-    if (item && !item.scrobbled) {
+    [dispatch]
-      dispatch(scrobble(info.trackId, true))
+  )
-      subsonic.scrobble(info.trackId, true)
-    }
-  }
 
-  const OnAudioPlay = (info) => {
+  const onAudioPause = useCallback(
-    dispatch(currentPlaying(info))
+    (info) => {
-    if (info.duration) {
+      dispatch(currentPlaying(info))
-      document.title = `${info.name} - ${info.singer} - Navidrome`
+    },
-      dispatch(scrobble(info.trackId, false))
+    [dispatch]
-      subsonic.scrobble(info.trackId, false)
+  )
-    }
-  }
 
-  const onAudioPause = (info) => {
+  const onAudioEnded = useCallback(
-    dispatch(currentPlaying(info))
+    (currentPlayId, audioLists, info) => {
-  }
+      dispatch(currentPlaying(info))
-
+      dataProvider.getOne('keepalive', { id: info.trackId })
-  const onAudioEnded = (currentPlayId, audioLists, info) => {
+    },
-    dispatch(currentPlaying(info))
+    [dispatch, dataProvider]
-    dataProvider.getOne('keepalive', { id: info.trackId })
+  )
-  }
 
   if (authenticated && options.audioLists.length > 0) {
     return (