diff --git a/src/react-utils/useNodeEditing.ts b/src/react-utils/useNodeEditing.ts index 5d32d1ca..5900518b 100644 --- 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 index ed909d5f..b299b243 100644 --- a/src/react-utils/useNodeHovered.ts +++ b/src/react-utils/useNodeHovered.ts @@ -5,8 +5,8 @@ import {useBooleanState} from './hooks'; export const useNodeHovered = (nodeRef: RefObject) => { const [nodeHovered, setNodeHovered, unsetNodeHovered] = useBooleanState(false); - const anchor = nodeRef.current; useEffect(() => { + const {current: anchor} = nodeRef; anchor?.addEventListener('mouseenter', setNodeHovered); anchor?.addEventListener('mouseleave', unsetNodeHovered); @@ -14,7 +14,9 @@ export const useNodeHovered = (nodeRef: RefObject) => { 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; };