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(
+    (audioInfo) => (
       <Link
         to={`/album/${audioInfo.albumId}/show`}
         className={classes.audioTitle}
       >
         {audioInfo.name ? `${audioInfo.name} - ${audioInfo.singer}` : ''}
       </Link>
+    ),
+    [classes.audioTitle]
   )
 
   const defaultOptions = {
@@ -80,25 +83,28 @@ 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)
-  const options = addQueueToOptions(queue)
-  const { authenticated } = useAuthState()
-
-  const OnAudioListsChange = (currentPlayIndex, audioLists) => {
       dispatch(syncQueue(currentPlayIndex, audioLists))
-  }
+    },
+    [dispatch]
+  )
 
-  const OnAudioProgress = (info) => {
+  const OnAudioProgress = useCallback(
+    (info) => {
       if (info.ended) {
         document.title = 'Navidrome'
       }
@@ -111,25 +117,36 @@ const Player = () => {
         dispatch(scrobble(info.trackId, true))
         subsonic.scrobble(info.trackId, true)
       }
-  }
+    },
+    [dispatch, queue.queue]
+  )
 
-  const OnAudioPlay = (info) => {
+  const OnAudioPlay = useCallback(
+    (info) => {
       dispatch(currentPlaying(info))
       if (info.duration) {
         document.title = `${info.name} - ${info.singer} - Navidrome`
         dispatch(scrobble(info.trackId, false))
         subsonic.scrobble(info.trackId, false)
       }
-  }
+    },
+    [dispatch]
+  )
 
-  const onAudioPause = (info) => {
+  const onAudioPause = useCallback(
+    (info) => {
       dispatch(currentPlaying(info))
-  }
+    },
+    [dispatch]
+  )
 
-  const onAudioEnded = (currentPlayId, audioLists, info) => {
+  const onAudioEnded = useCallback(
+    (currentPlayId, audioLists, info) => {
       dispatch(currentPlaying(info))
       dataProvider.getOne('keepalive', { id: info.trackId })
-  }
+    },
+    [dispatch, dataProvider]
+  )
 
   if (authenticated && options.audioLists.length > 0) {
     return (