From 06f59e3ed3b4428e5ee57d0db3ad88e5bb95c63a Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 30 Oct 2024 21:41:52 +0300
Subject: [PATCH] R: Improve conditional hook performance

---
 rsconcept/frontend/src/hooks/useClickedOutside.ts        | 9 ++++++---
 rsconcept/frontend/src/hooks/useDropdown.ts              | 2 +-
 .../src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/rsconcept/frontend/src/hooks/useClickedOutside.ts b/rsconcept/frontend/src/hooks/useClickedOutside.ts
index 2ae34ecf..96307ec6 100644
--- a/rsconcept/frontend/src/hooks/useClickedOutside.ts
+++ b/rsconcept/frontend/src/hooks/useClickedOutside.ts
@@ -4,10 +4,13 @@ import { useEffect } from 'react';
 
 import { assertIsNode } from '@/utils/utils';
 
-function useClickedOutside({ ref, callback }: { ref: React.RefObject<HTMLElement>; callback?: () => void }) {
+function useClickedOutside(enabled: boolean, ref: React.RefObject<HTMLElement>, callback?: () => void) {
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
     function handleClickOutside(event: MouseEvent) {
-      console.log(1);
       assertIsNode(event.target);
       if (ref.current && !ref.current.contains(event.target)) {
         if (callback) callback();
@@ -17,7 +20,7 @@ function useClickedOutside({ ref, callback }: { ref: React.RefObject<HTMLElement
     return () => {
       document.removeEventListener('mouseup', handleClickOutside);
     };
-  }, [ref, callback]);
+  }, [ref, callback, enabled]);
 }
 
 export default useClickedOutside;
diff --git a/rsconcept/frontend/src/hooks/useDropdown.ts b/rsconcept/frontend/src/hooks/useDropdown.ts
index 9ab6af57..f7e8b383 100644
--- a/rsconcept/frontend/src/hooks/useDropdown.ts
+++ b/rsconcept/frontend/src/hooks/useDropdown.ts
@@ -8,7 +8,7 @@ function useDropdown() {
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef(null);
 
-  useClickedOutside({ ref, callback: () => setIsOpen(false) });
+  useClickedOutside(isOpen, ref, () => setIsOpen(false));
 
   return {
     ref,
diff --git a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
index 5c845343..796a4970 100644
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
@@ -77,7 +77,7 @@ function NodeContextMenu({
     onHide();
   }, [onHide]);
 
-  useClickedOutside({ ref, callback: handleHide });
+  useClickedOutside(isOpen, ref, handleHide);
 
   useEffect(() => setIsOpen(true), []);