From ba4aaea45b438019f810d36b58d31a756e4c592f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 27 Sep 2023 17:08:14 +1000
Subject: [PATCH] fix(ui): memoize event handlers on bounding box

---
 .../IAICanvasToolbar/IAICanvasBoundingBox.tsx | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
index 0f94b1c57a..8f86605726 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
@@ -213,45 +213,45 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     [scaledStep]
   );
 
-  const handleStartedTransforming = () => {
+  const handleStartedTransforming = useCallback(() => {
     dispatch(setIsTransformingBoundingBox(true));
-  };
+  }, [dispatch]);
 
-  const handleEndedTransforming = () => {
+  const handleEndedTransforming = useCallback(() => {
     dispatch(setIsTransformingBoundingBox(false));
     dispatch(setIsMovingBoundingBox(false));
     dispatch(setIsMouseOverBoundingBox(false));
     setIsMouseOverBoundingBoxOutline(false);
-  };
+  }, [dispatch]);
 
-  const handleStartedMoving = () => {
+  const handleStartedMoving = useCallback(() => {
     dispatch(setIsMovingBoundingBox(true));
-  };
+  }, [dispatch]);
 
-  const handleEndedModifying = () => {
+  const handleEndedModifying = useCallback(() => {
     dispatch(setIsTransformingBoundingBox(false));
     dispatch(setIsMovingBoundingBox(false));
     dispatch(setIsMouseOverBoundingBox(false));
     setIsMouseOverBoundingBoxOutline(false);
-  };
+  }, [dispatch]);
 
-  const handleMouseOver = () => {
+  const handleMouseOver = useCallback(() => {
     setIsMouseOverBoundingBoxOutline(true);
-  };
+  }, []);
 
-  const handleMouseOut = () => {
+  const handleMouseOut = useCallback(() => {
     !isTransformingBoundingBox &&
       !isMovingBoundingBox &&
       setIsMouseOverBoundingBoxOutline(false);
-  };
+  }, [isMovingBoundingBox, isTransformingBoundingBox]);
 
-  const handleMouseEnterBoundingBox = () => {
+  const handleMouseEnterBoundingBox = useCallback(() => {
     dispatch(setIsMouseOverBoundingBox(true));
-  };
+  }, [dispatch]);
 
-  const handleMouseLeaveBoundingBox = () => {
+  const handleMouseLeaveBoundingBox = useCallback(() => {
     dispatch(setIsMouseOverBoundingBox(false));
-  };
+  }, [dispatch]);
 
   return (
     <Group {...rest}>