refactor(react): dont create new edge objects on setEdges

packages/react/src/hooks/useVisibleEdgeIds.ts

@@ -0,0 +1,49 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+import { isEdgeVisible } from '@xyflow/system';
+
+import { useStore } from './useStore';
+import { type ReactFlowState } from '../types';
+
+function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
+  const edgeIds = useStore(
+    useCallback(
+      (s: ReactFlowState) => {
+        if (!onlyRenderVisible) {
+          return s.edges.map((edge) => edge.id);
+        }
+
+        const visibleEdgeIds = [];
+
+        if (s.width && s.height) {
+          for (const edge of s.edges) {
+            const sourceNode = s.nodeLookup.get(edge.source);
+            const targetNode = s.nodeLookup.get(edge.target);
+
+            if (
+              sourceNode &&
+              targetNode &&
+              isEdgeVisible({
+                sourceNode,
+                targetNode,
+                width: s.width,
+                height: s.height,
+                transform: s.transform,
+              })
+            ) {
+              visibleEdgeIds.push(edge.id);
+            }
+          }
+        }
+
+        return visibleEdgeIds;
+      },
+      [onlyRenderVisible]
+    ),
+    shallow
+  );
+
+  return edgeIds;
+}
+
+export default useVisibleEdgeIds;

packages/react/src/hooks/useVisibleEdges.ts

@@ -1,42 +0,0 @@
-import { useCallback } from 'react';
-import { shallow } from 'zustand/shallow';
-import { isEdgeVisible } from '@xyflow/system';
-
-import { useStore } from '../hooks/useStore';
-import { type ReactFlowState } from '../types';
-
-function useVisibleEdgeIds(onlyRenderVisible: boolean): string[] {
-  const edgeIds = useStore(
-    useCallback(
-      (s: ReactFlowState) => {
-        const visibleEdges =
-          onlyRenderVisible && s.width && s.height
-            ? s.edges.filter((e) => {
-                const sourceNode = s.nodeLookup.get(e.source);
-                const targetNode = s.nodeLookup.get(e.target);
-
-                return (
-                  sourceNode &&
-                  targetNode &&
-                  isEdgeVisible({
-                    sourceNode,
-                    targetNode,
-                    width: s.width,
-                    height: s.height,
-                    transform: s.transform,
-                  })
-                );
-              })
-            : s.edges;
-
-        return visibleEdges.map((edge) => edge.id);
-      },
-      [onlyRenderVisible]
-    ),
-    shallow
-  );
-
-  return edgeIds;
-}
-
-export default useVisibleEdgeIds;

packages/react/src/hooks/useVisibleNodeIds.ts

@@ -1,7 +1,7 @@
 import { getNodesInside } from '@xyflow/system';
 import { shallow } from 'zustand/shallow';
 
-import { useStore } from '../hooks/useStore';
+import { useStore } from './useStore';
 import type { Node, ReactFlowState } from '../types';
 import { useCallback } from 'react';