performance: memo

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

@@ -1,6 +1,6 @@
 import Icon from '@chakra-ui/icon';
 import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
-import { memo, useState } from 'react';
+import { useState } from 'react';
 import { Draggable } from 'react-beautiful-dnd';
 import EventTimes from '../../../common/components/eventTimes/EventTimes';
 import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
@@ -11,16 +11,6 @@ import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import { millisToMinutes } from '../../../common/dateConfig';
 import style from './EventBlock.module.css';
 
-const areEqual = (prevProps, nextProps) => {
-  return (
-    prevProps.data.revision === nextProps.data.revision &&
-    prevProps.selected === nextProps.selected &&
-    prevProps.next === nextProps.next &&
-    prevProps.index === nextProps.index &&
-    prevProps.delay === nextProps.delay
-  );
-};
-
 const ExpandedBlock = (props) => {
   const { provided, data, next, delay, delayValue, actionHandler } = props;
 
@@ -153,7 +143,7 @@ const CollapsedBlock = (props) => {
   );
 };
 
-const EventBlock = (props) => {
+export default function EventBlock(props) {
   const { data, selected, delay, index, actionHandler } = props;
 
   const [expanded, setExpanded] = useState(true);
@@ -200,6 +190,4 @@ const EventBlock = (props) => {
       )}
     </Draggable>
   );
-};
+}
-
-export default memo(EventBlock, areEqual);

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

@@ -2,8 +2,19 @@ import DelayBlock from './DelayBlock';
 import BlockBlock from './BlockBlock';
 import EventBlock from './EventBlock';
 import { showErrorToast } from '../../../common/helpers/toastManager';
+import { memo } from 'react';
 
-export default function EventListItem(props) {
+const areEqual = (prevProps, nextProps) => {
+  return (
+    prevProps.data.revision === nextProps.data.revision &&
+    prevProps.selected === nextProps.selected &&
+    prevProps.next === nextProps.next &&
+    prevProps.index === nextProps.index &&
+    prevProps.delay === nextProps.delay
+  );
+};
+
+const EventListItem = (props) => {
   const {
     type,
     index,
@@ -83,4 +94,6 @@ export default function EventListItem(props) {
     default:
       break;
   }
-}
+};
+
+export default memo(EventListItem, areEqual);

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

@@ -203,8 +203,7 @@ export default function EventListWrapper() {
   }, [isError]);
 
   // Events API
-  const eventsHandler = useCallback(
+  const eventsHandler = useCallback(async (action, payload) => {
-    async (action, payload) => {
     switch (action) {
       case 'add':
         try {
@@ -290,17 +289,7 @@ export default function EventListWrapper() {
         showErrorToast('Unrecognised request', action);
         break;
     }
-    },
+  }, []);
-    [
-      addEvent,
-      applyDelay,
-      data,
-      deleteEvent,
-      patchEvent,
-      reorderEvent,
-      updateEvent,
-    ]
-  );
 
   return (
     <>