From 90c407b7f6e596b2579e3cdce56f23e9fd0632da Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Fri, 27 Nov 2020 14:24:22 -0500
Subject: [PATCH] Also use PureDatagridRow to speed up SongDatagrid

---
 ui/src/common/SongDatagrid.js   |  6 +++---
 ui/src/common/index.js          |  1 +
 ui/src/common/useTraceUpdate.js | 17 +++++++++++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/common/useTraceUpdate.js

diff --git a/ui/src/common/SongDatagrid.js b/ui/src/common/SongDatagrid.js
index 2f7352608..ed6a96973 100644
--- a/ui/src/common/SongDatagrid.js
+++ b/ui/src/common/SongDatagrid.js
@@ -1,6 +1,6 @@
 import React, { isValidElement, useMemo, useCallback } from 'react'
 import { useDispatch } from 'react-redux'
-import { Datagrid, PureDatagridBody, DatagridRow } from 'react-admin'
+import { Datagrid, PureDatagridBody, PureDatagridRow } from 'react-admin'
 import { TableCell, TableRow, Typography } from '@material-ui/core'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
@@ -96,13 +96,13 @@ export const SongDatagridRow = ({
           colSpan={childCount + (rest.expand ? 1 : 0)}
         />
       )}
-      <DatagridRow
+      <PureDatagridRow
         record={record}
         {...rest}
         className={clsx(className, classes.row)}
       >
         {fields}
-      </DatagridRow>
+      </PureDatagridRow>
     </>
   )
 }
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index 2cae83232..f6b4d442f 100644
--- a/ui/src/common/index.js
+++ b/ui/src/common/index.js
@@ -23,4 +23,5 @@ export * from './Title'
 export * from './SongBulkActions'
 export * from './useAlbumsPerPage'
 export * from './useInterval'
+export * from './useTraceUpdate'
 export * from './Writable'
diff --git a/ui/src/common/useTraceUpdate.js b/ui/src/common/useTraceUpdate.js
new file mode 100644
index 000000000..981f04783
--- /dev/null
+++ b/ui/src/common/useTraceUpdate.js
@@ -0,0 +1,17 @@
+import { useRef, useEffect } from 'react'
+
+export function useTraceUpdate(props) {
+  const prev = useRef(props)
+  useEffect(() => {
+    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+      if (prev.current[k] !== v) {
+        ps[k] = [prev.current[k], v]
+      }
+      return ps
+    }, {})
+    if (Object.keys(changedProps).length > 0) {
+      console.log('Changed props:', changedProps)
+    }
+    prev.current = props
+  })
+}