From 9631258c45e2aa7a53ecc40f03091d06bec8d90c Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Tue, 15 Mar 2022 15:05:56 +0000
Subject: [PATCH] cleaning up

---
 app/canvas/canvas.tsx                         | 25 +++++++-----------
 .../sidebar-left/custom-drag-layer.tsx        | 26 ++++++++++---------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/app/canvas/canvas.tsx b/app/canvas/canvas.tsx
index 08c0deb31b..1a7c8278a9 100644
--- a/app/canvas/canvas.tsx
+++ b/app/canvas/canvas.tsx
@@ -4,6 +4,7 @@ import { TouchBackend } from "react-dnd-touch-backend";
 import {
   type Instance,
   type ChildrenUpdates,
+  type OnChangeChildren,
   type Data,
   type Tree,
   useAllUserProps,
@@ -31,8 +32,8 @@ const useElementsTree = (
   Component: typeof WrapperComponentDev,
   setRootInstance: (instance: Instance) => void
 ) => {
-  const onChangeChildren = useCallback(
-    (change) => {
+  return useMemo(() => {
+    const onChangeChildren: OnChangeChildren = (change) => {
       const { instanceId, updates } = change;
       const updatedRoot = setInstanceChildren(
         instanceId,
@@ -47,19 +48,13 @@ const useElementsTree = (
         type: "syncInstanceChildrenChange",
         payload: change,
       });
-    },
-    [rootInstance, setRootInstance]
-  );
-
-  return useMemo(
-    () =>
-      createElementsTree({
-        instance: rootInstance,
-        Component,
-        onChangeChildren,
-      }),
-    [rootInstance, onChangeChildren, Component]
-  );
+    };
+    return createElementsTree({
+      instance: rootInstance,
+      Component,
+      onChangeChildren,
+    });
+  }, [rootInstance, Component]);
 };
 
 const useIsPreviewMode = () => {
diff --git a/app/designer/sidebar-left/custom-drag-layer.tsx b/app/designer/sidebar-left/custom-drag-layer.tsx
index f7c82e5747..6e99b39194 100644
--- a/app/designer/sidebar-left/custom-drag-layer.tsx
+++ b/app/designer/sidebar-left/custom-drag-layer.tsx
@@ -19,18 +19,20 @@ export type CustomDragLayerProps = {
 };
 
 export const CustomDragLayer = ({ onDrag }: CustomDragLayerProps) => {
-  const { itemType, isDragging, initialOffset, clientOffset } = useDragLayer(
-    (monitor) => ({
-      item: monitor.getItem(),
-      itemType: monitor.getItemType() as Instance["component"],
-      initialOffset: monitor.getInitialSourceClientOffset(),
-      isDragging: monitor.isDragging(),
-      clientOffset: monitor.getClientOffset(),
-    })
-  );
+  const {
+    itemType: component,
+    isDragging,
+    initialOffset,
+    clientOffset,
+  } = useDragLayer((monitor) => ({
+    itemType: monitor.getItemType() as Instance["component"],
+    initialOffset: monitor.getInitialSourceClientOffset(),
+    isDragging: monitor.isDragging(),
+    clientOffset: monitor.getClientOffset(),
+  }));
 
   useEffect(() => {
-    if (clientOffset === null || initialOffset === null || itemType === null) {
+    if (clientOffset === null || initialOffset === null || component === null) {
       return;
     }
 
@@ -41,9 +43,9 @@ export const CustomDragLayer = ({ onDrag }: CustomDragLayerProps) => {
 
     onDrag({
       currentOffset,
-      component: itemType,
+      component,
     });
-  }, [clientOffset, initialOffset, itemType, onDrag]);
+  }, [clientOffset, initialOffset, component, onDrag]);
 
   if (isDragging === false) return null;