refactor(wrapNode): remove unnecessary memoization

src/components/Nodes/useMemoizedMouseHandler.ts

@@ -1,24 +0,0 @@
-import { MouseEvent, useCallback } from 'react';
-import { GetState } from 'zustand';
-
-import { ReactFlowState, Node } from '../../types';
-
-function useMemoizedMouseHandler(
-  id: string,
-  getState: GetState<ReactFlowState>,
-  handler?: (event: MouseEvent, node: Node) => void
-) {
-  const memoizedHandler = useCallback(
-    (event: MouseEvent) => {
-      if (typeof handler !== 'undefined') {
-        const node = getState().nodeInternals.get(id)!;
-        handler(event, { ...node });
-      }
-    },
-    [handler, id]
-  );
-
-  return memoizedHandler;
-}
-
-export default useMemoizedMouseHandler;

src/components/Nodes/utils.ts

@@ -1,4 +1,7 @@
-import { HandleElement, Position } from '../../types';
+import { MouseEvent } from 'react';
+import { GetState } from 'zustand';
+
+import { HandleElement, Node, Position, ReactFlowState } from '../../types';
 import { getDimensions } from '../../utils';
 
 export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
@@ -39,3 +42,16 @@ export const getHandleBoundsByHandleType = (
     };
   });
 };
+
+export function getMouseHandler(
+  id: string,
+  getState: GetState<ReactFlowState>,
+  handler?: (event: MouseEvent, node: Node) => void
+) {
+  return handler === undefined
+    ? handler
+    : (event: MouseEvent) => {
+        const node = getState().nodeInternals.get(id)!;
+        handler(event, { ...node });
+      };
+}

src/components/Nodes/wrapNode.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react';
+import React, { useEffect, useRef, memo, ComponentType, MouseEvent } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../store';
 import { Provider } from '../../contexts/NodeIdContext';
 import { NodeProps, WrapNodeProps, ReactFlowState } from '../../types';
-import useMemoizedMouseHandler from './useMemoizedMouseHandler';
 import useDragNode from '../../hooks/useDragNode';
+import { getMouseHandler } from './utils';
 
 const selector = (s: ReactFlowState) => ({
   addSelectedNodes: s.addSelectedNodes,
@@ -53,39 +53,26 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     const prevTargetPosition = useRef(targetPosition);
     const prevType = useRef(type);
     const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
-    const nodeStyle: CSSProperties = useMemo(
-      () => ({
-        zIndex,
-        transform: `translate(${xPos}px,${yPos}px)`,
-        pointerEvents: hasPointerEvents ? 'all' : 'none',
-        ...style,
-      }),
-      [zIndex, xPos, yPos, hasPointerEvents, style]
-    );
 
-    const onMouseEnterHandler = useMemoizedMouseHandler(id, store.getState, onMouseEnter);
+    const onMouseEnterHandler = getMouseHandler(id, store.getState, onMouseEnter);
-    const onMouseMoveHandler = useMemoizedMouseHandler(id, store.getState, onMouseMove);
+    const onMouseMoveHandler = getMouseHandler(id, store.getState, onMouseMove);
-    const onMouseLeaveHandler = useMemoizedMouseHandler(id, store.getState, onMouseLeave);
+    const onMouseLeaveHandler = getMouseHandler(id, store.getState, onMouseLeave);
-    const onContextMenuHandler = useMemoizedMouseHandler(id, store.getState, onContextMenu);
+    const onContextMenuHandler = getMouseHandler(id, store.getState, onContextMenu);
-    const onNodeDoubleClickHandler = useMemoizedMouseHandler(id, store.getState, onNodeDoubleClick);
+    const onNodeDoubleClickHandler = getMouseHandler(id, store.getState, onNodeDoubleClick);
+    const onSelectNodeHandler = (event: MouseEvent) => {
+      if (isSelectable) {
+        store.setState({ nodesSelectionActive: false });
 
-    const onSelectNodeHandler = useCallback(
+        if (!selected) {
-      (event: MouseEvent) => {
+          addSelectedNodes([id]);
-        if (isSelectable) {
-          store.setState({ nodesSelectionActive: false });
-
-          if (!selected) {
-            addSelectedNodes([id]);
-          }
         }
+      }
 
-        if (onClick) {
+      if (onClick) {
-          const node = store.getState().nodeInternals.get(id)!;
+        const node = store.getState().nodeInternals.get(id)!;
-          onClick(event, { ...node });
+        onClick(event, { ...node });
-        }
+      }
-      },
+    };
-      [isSelectable, selected, onClick, id]
-    );
 
     useEffect(() => {
       if (nodeElement.current && !hidden) {
@@ -149,7 +136,12 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
       <div
         className={nodeClasses}
         ref={nodeElement}
-        style={nodeStyle}
+        style={{
+          zIndex,
+          transform: `translate(${xPos}px,${yPos}px)`,
+          pointerEvents: hasPointerEvents ? 'all' : 'none',
+          ...style,
+        }}
         onMouseEnter={onMouseEnterHandler}
         onMouseMove={onMouseMoveHandler}
         onMouseLeave={onMouseLeaveHandler}