Improve perf

src/views/BoardView/EditItemButton.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 
 import SidePanel from "../../ui/SidePanel";
 import ItemFormFactory from "./ItemFormFactory";
-import { useSelectedItems, useBoardState } from "react-sync-board";
+import { useSelectedItems } from "react-sync-board";
 
 const CardContent = styled.div.attrs(() => ({ className: "content" }))`
   display: flex;
@@ -13,7 +13,6 @@ const CardContent = styled.div.attrs(() => ({ className: "content" }))`
 `;
 
 const EditItemButton = ({ ItemFormComponent, showEdit, setShowEdit }) => {
-  const boardState = useBoardState();
   const selectedItems = useSelectedItems();
   const { t } = useTranslation();
 
@@ -46,7 +45,7 @@ const EditItemButton = ({ ItemFormComponent, showEdit, setShowEdit }) => {
       </button>
       <SidePanel
         key={selectedItems[0]}
-        open={showEdit && !boardState.selecting}
+        open={showEdit}
         onClose={() => {
           setShowEdit(false);
         }}

src/views/BoardView/ItemFormFactory.jsx

@@ -2,11 +2,7 @@ import React from "react";
 import { Form } from "react-final-form";
 
 import AutoSave from "../../ui/formUtils/AutoSave";
-import {
-  useItemActions,
-  useSelectedItems,
-  useItems,
-} from "react-sync-board";
+import { useItemActions, useSelectedItems, useItems } from "react-sync-board";
 
 export const getFormFieldComponent = (type, itemMap) => {
   if (type in itemMap) {
@@ -30,6 +26,11 @@ const ItemFormFactory = ({ ItemFormComponent }) => {
     [batchUpdateItems, selectedItems]
   );
 
+  const currentItems = React.useMemo(
+    () => items.filter(({ id }) => selectedItems.includes(id)),
+    [items, selectedItems]
+  );
+
   return (
     <Form
       onSubmit={onSubmitHandler}
@@ -41,13 +42,11 @@ const ItemFormFactory = ({ ItemFormComponent }) => {
           }}
         >
           <AutoSave save={onSubmitHandler} />
-          <ItemFormComponent
-            items={items.filter(({ id }) => selectedItems.includes(id))}
-          />
+          <ItemFormComponent items={currentItems} />
         </div>
       )}
     />
   );
 };
 
-export default React.memo(ItemFormFactory);
+export default ItemFormFactory;

src/views/BoardView/SelectedItemsPane.jsx

@@ -183,13 +183,18 @@ const SelectedItemsPane = ({ hideMenu = false, ItemFormComponent }) => {
           );
         })}
 
-      {!boardState.selecting && (
-        <EditItemButton
-          ItemFormComponent={ItemFormComponent}
-          showEdit={showEdit}
-          setShowEdit={setShowEdit}
-        />
-      )}
+      {!boardState.selecting &&
+        !(
+          boardState.zooming ||
+          boardState.panning ||
+          boardState.movingItems
+        ) && (
+          <EditItemButton
+            ItemFormComponent={ItemFormComponent}
+            showEdit={showEdit}
+            setShowEdit={setShowEdit}
+          />
+        )}
     </ActionPane>
   );
 };