performance enhancements

client/src/features/editors/list/EventBlock.jsx

@@ -1,5 +1,5 @@
 import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
-import { useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import EventTimes from '../../../common/components/eventTimes/EventTimes';
 import { showErrorToast } from '../../../common/helpers/toastManager';
 import style from './Block.module.css';
@@ -9,13 +9,30 @@ import ActionButtons from './ActionButtons';
 import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
 import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
-export default function EventBlock(props) {
+const areEqual = (prevProps, nextProps) => {
+  let shouldNotRerender =
+    prevProps.data.revision === nextProps.data.revision &&
+    prevProps.selected === nextProps.selected &&
+    prevProps.next === nextProps.next;
+  console.log('debug memo2', shouldNotRerender);
+  return (
+    prevProps.data.revision === nextProps.data.revision &&
+    prevProps.selected === nextProps.selected &&
+    prevProps.next === nextProps.next
+  );
+};
+
+const EventBlock = (props) => {
   const { data, selected, next, delay, index, eventsHandler } = props;
 
   const [more, setMore] = useState(false);
-  // NOTE: cheating to add responsiveness
   const [visible, setVisible] = useState(data.isPublic || false);
 
+  // Set visibility indicator
+  useEffect(() => {
+    setVisible(data.isPublic);
+  }, [data.isPublic]);
+
   const updateValues = (field, value) => {
     // validate field
     if (field in data) {
@@ -56,7 +73,6 @@ export default function EventBlock(props) {
 
   const handleVisibleToggle = () => {
     let viz = !data.isPublic || !visible;
-    setVisible(viz);
     updateValues('isPublic', viz);
   };
 
@@ -85,13 +101,6 @@ export default function EventBlock(props) {
               submitHandler={handleTitleSubmit}
               underlined
             />
-            <EditableText
-              label='Subtitle'
-              defaultValue={data.subtitle}
-              placeholder='Add Subtitle'
-              submitHandler={handleSubtitleSubmit}
-              underlined
-            />
             <EditableText
               label='Presenter'
               defaultValue={data.presenter}
@@ -99,6 +108,13 @@ export default function EventBlock(props) {
               submitHandler={handlePresenterSubmit}
               underlined
             />
+            <EditableText
+              label='Subtitle'
+              defaultValue={data.subtitle}
+              placeholder='Add Subtitle'
+              submitHandler={handleSubtitleSubmit}
+              underlined
+            />
           </div>
         ) : (
           <div className={style.titleContainer}>
@@ -129,4 +145,6 @@ export default function EventBlock(props) {
       </div>
     </div>
   );
-}
+};
+
+export default memo(EventBlock, areEqual);

client/src/features/editors/list/EventList.jsx

@@ -1,6 +1,6 @@
 import style from './List.module.css';
 
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { useSocket } from '../../../app/context/socketContext';
 import tinykeys from 'tinykeys';
 import Empty from '../../../common/state/Empty';
@@ -111,7 +111,7 @@ export default function EventList(props) {
         if (e.type === 'delay') cumulativeDelay += e.duration;
         else if (e.type === 'block') cumulativeDelay = 0;
         return (
-          <div key={index}>
+          <Fragment key={index}>
             <EventListItem
               type={e.type}
               index={index}
@@ -132,7 +132,7 @@ export default function EventList(props) {
                 />
               )}
             </AnimatePresence>
-          </div>
+          </Fragment>
         );
       })}
     </div>