fix(react-utils): fix for useNodeEditing and useNodeHover hooks (#239)

* fix(tests): fixed useNodeHovered and useNodeHovered * fix(tests): fixed useNodeHovered and useNodeHovered
gravity-ui · May 21, 2024 · 48d018d · 48d018d
1 parent 5b416b2
commit 48d018d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/react-utils/useNodeEditing.ts b/src/react-utils/useNodeEditing.ts
@@ -14,15 +14,17 @@ export const useNodeEditing = ({
     const state = useBooleanState(false);
     const [, , unsetEdit, toggleEdit] = state;
 
-    const anchor = nodeRef.current;
     useEffect(() => {
+        const {current: anchor} = nodeRef;
         anchor?.addEventListener('dblclick', toggleEdit);
         view.dom.addEventListener('focus', unsetEdit);
         return () => {
             anchor?.removeEventListener('dblclick', toggleEdit);
             view.dom.removeEventListener('focus', unsetEdit);
         };
-    }, [anchor, view.dom, toggleEdit, unsetEdit]);
+        // https://github.com/facebook/react/issues/23392#issuecomment-1055610198
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [view.dom, toggleEdit, unsetEdit, nodeRef.current]);
 
     return state;
 };
diff --git a/src/react-utils/useNodeHovered.ts b/src/react-utils/useNodeHovered.ts
@@ -5,16 +5,18 @@ import {useBooleanState} from './hooks';
 export const useNodeHovered = (nodeRef: RefObject<HTMLElement>) => {
     const [nodeHovered, setNodeHovered, unsetNodeHovered] = useBooleanState(false);
 
-    const anchor = nodeRef.current;
     useEffect(() => {
+        const {current: anchor} = nodeRef;
         anchor?.addEventListener('mouseenter', setNodeHovered);
         anchor?.addEventListener('mouseleave', unsetNodeHovered);
 
         return () => {
             anchor?.removeEventListener('mouseenter', setNodeHovered);
             anchor?.removeEventListener('mouseleave', unsetNodeHovered);
         };
-    }, [anchor, setNodeHovered, unsetNodeHovered]);
+        // https://github.com/facebook/react/issues/23392#issuecomment-1055610198
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodeRef.current, setNodeHovered, unsetNodeHovered]);
 
     return nodeHovered;
 };