From ccd9a8311ab2ad82165be69773195e41c17d051b Mon Sep 17 00:00:00 2001
From: Marks Polakovs <marks@markspolakovs.me>
Date: Mon, 2 Nov 2020 20:34:30 +0000
Subject: [PATCH 1/2] Reduce Item renders

Item used to subscribe to the full state of the player of its column, which meant it re-rendered whenever the player state updated (many times per second) - when all it needed is the ID of the loaded item. This commit scopes the selector more tightly.
---
 src/showplanner/Item.tsx | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/showplanner/Item.tsx b/src/showplanner/Item.tsx
index c0242ba..a0202c0 100644
--- a/src/showplanner/Item.tsx
+++ b/src/showplanner/Item.tsx
@@ -25,14 +25,13 @@ export const Item = memo(function Item({
   const isReal = "timeslotitemid" in x;
   const isGhost = "ghostid" in x;
 
-  const playerState = useSelector((state: RootState) =>
-    column > -1 ? state.mixer.players[column] : undefined
+  const loadedItem = useSelector(
+    (state: RootState) =>
+      column > -1 ? state.mixer.players[column]?.loadedItem : null,
+    (a, b) => a === null || b === null || itemId(a) === itemId(b)
   );
 
-  const isLoaded =
-    playerState &&
-    playerState.loadedItem !== null &&
-    itemId(playerState.loadedItem) === id;
+  const isLoaded = loadedItem !== null ? itemId(loadedItem) === id : false;
 
   const showDebug = useSelector(
     (state: RootState) => state.settings.showDebugInfo
@@ -59,14 +58,7 @@ export const Item = memo(function Item({
             "item " +
             ("played" in x ? (x.played ? "played " : "") : "") +
             x.type +
-            `${
-              column >= 0 &&
-              playerState &&
-              playerState.loadedItem !== null &&
-              itemId(playerState.loadedItem) === id
-                ? " active"
-                : ""
-            }`
+            `${column >= 0 && isLoaded ? " active" : ""}`
           }
           onClick={triggerClick}
           {...provided.draggableProps}

From aed8a4ef35f88e793afa6491f201039c7ad376a6 Mon Sep 17 00:00:00 2001
From: Marks Polakovs <marks@markspolakovs.me>
Date: Sun, 8 Nov 2020 13:22:52 +0000
Subject: [PATCH 2/2] Fix loaded item BG

---
 src/showplanner/Item.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/showplanner/Item.tsx b/src/showplanner/Item.tsx
index a0202c0..8e672c2 100644
--- a/src/showplanner/Item.tsx
+++ b/src/showplanner/Item.tsx
@@ -28,7 +28,9 @@ export const Item = memo(function Item({
   const loadedItem = useSelector(
     (state: RootState) =>
       column > -1 ? state.mixer.players[column]?.loadedItem : null,
-    (a, b) => a === null || b === null || itemId(a) === itemId(b)
+    (a, b) =>
+      (a === null && b === null) ||
+      (a !== null && b !== null && itemId(a) === itemId(b))
   );
 
   const isLoaded = loadedItem !== null ? itemId(loadedItem) === id : false;