refract + cleanup: render only on data change

- add library for deep comparison
- cleanup console.logs

client/package.json

@@ -16,6 +16,7 @@
     "react": "^17.0.1",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.1",
+    "react-fast-compare": "^3.2.0",
     "react-icons": "^4.2.0",
     "react-qr-code": "^1.1.1",
     "react-query": "^3.13.5",

client/src/features/viewers/production/lower/LowerLines.jsx

@@ -12,8 +12,6 @@ export default function LowerLines(props) {
   };
   const [showLower, setShowLower] = useState(true);
 
-  console.log('DEBUG TITLE SHOW:', title.showNow);
-
   // Unmount if fadeOut
   useEffect(() => {
     if (!options.fadeOut) return;

client/src/features/viewers/production/lower/LowerWrapper.jsx

@@ -1,10 +1,27 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import LowerClean from './LowerClean';
 import LowerLines from './LowerLines';
+const isEqual = require('react-fast-compare');
 
-export default function Lower(props) {
-  const { title, ...rest } = props;
-  const [titles, setTitles] = useState(null);
+const areEqual = (prevProps, nextProps) => {
+  return (
+    isEqual(prevProps.title, nextProps.title) &&
+    isEqual(prevProps.lower && nextProps.lower)
+  );
+};
+
+const Lower = (props) => {
+  const { title } = props;
+  const [titles, setTitles] = useState({
+    titleNow: '',
+    titleNext: '',
+    subtitleNow: '',
+    subtitleNext: '',
+    presenterNow: '',
+    presenterNext: '',
+    showNow: false,
+    showNext: false,
+  });
   const [preset, setPreset] = useState(1);
   const [lowerOptions, setLowerOptions] = useState({});
 
@@ -23,21 +40,17 @@ export default function Lower(props) {
       title?.subtitleNow !== titles?.subtitleNow ||
       title?.presenterNow !== titles?.presenterNow
     ) {
-      console.log('DEBUG TITLES: SETTING TITLES TO NULL');
       setTitles((t) => ({ ...t, showNow: false }));
 
       const transitionTime = 2000;
 
       timeout = setTimeout(() => {
-        console.log('DEBUG TITLES: RESUMING');
         setTitles(title);
       }, transitionTime);
     }
 
     return () => {
       if (timeout != null) {
-        console.log('DEBUG TITLES: CLEARING');
-
         clearTimeout(timeout);
       }
     };
@@ -109,10 +122,18 @@ export default function Lower(props) {
 
   switch (preset) {
     case 0:
-      return <LowerClean {...rest} title={title} options={lowerOptions} />;
+      return (
+        <LowerClean lower={props.lower} title={titles} options={lowerOptions} />
+      );
     case 1:
-      return <LowerLines {...rest} title={titles} options={lowerOptions} />;
+      return (
+        <LowerLines lower={props.lower} title={titles} options={lowerOptions} />
+      );
     default:
-      return <LowerLines {...rest} title={title} options={lowerOptions} />;
+      return (
+        <LowerLines lower={props.lower} title={titles} options={lowerOptions} />
+      );
   }
-}
+};
+
+export default memo(Lower, areEqual);

client/yarn.lock

@@ -10078,7 +10078,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-fast-compare@3.2.0:
+react-fast-compare@3.2.0, react-fast-compare@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==