refactor: improvements

frontend/src/app/canvas/useCanvasConnectionPath.ts

@@ -7,6 +7,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { getPathNodeIds, getPausedSegmentNodeIds } from '@/lib/graph/graphPath'
 
+/** Serialize set to a stable string for equality. */
+function setToStableKey(s: Set<string>): string {
+  return Array.from(s).sort().join(',')
+}
+
 export type EdgeLike = { source: string; target: string }
 
 /** Minimum time (ms) the connection ant trail runs when a path update is in progress. */
@@ -111,7 +116,7 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
     []
   )
 
-  const connectionPathNodeIds = useMemo(
+  const connectionPathNodeIdsRaw = useMemo(
     () =>
       getPathNodeIds(
         edges,
@@ -121,8 +126,18 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
       ),
     [edges, connectionPathUpdatingNodeIds, connectionPathTriggerNodeIds, connectionPathPausedNodeIds]
   )
+  const connectionPathNodeIdsRef = useRef<Set<string>>(connectionPathNodeIdsRaw)
+  const connectionPathNodeIdsKeyRef = useRef<string>('')
+  const connectionPathNodeIds =
+    setToStableKey(connectionPathNodeIdsRaw) === connectionPathNodeIdsKeyRef.current
+      ? connectionPathNodeIdsRef.current
+      : (() => {
+          connectionPathNodeIdsKeyRef.current = setToStableKey(connectionPathNodeIdsRaw)
+          connectionPathNodeIdsRef.current = connectionPathNodeIdsRaw
+          return connectionPathNodeIdsRaw
+        })()
 
-  const connectionPathPausedSegmentNodeIds = useMemo(
+  const connectionPathPausedSegmentNodeIdsRaw = useMemo(
     () =>
       getPausedSegmentNodeIds(
         edges,
@@ -132,12 +147,42 @@ export function useCanvasConnectionPath(edges: EdgeLike[]): UseCanvasConnectionP
       ),
     [edges, connectionPathNodeIds, connectionPathTriggerNodeIds, connectionPathPausedNodeIds]
   )
+  const connectionPathPausedSegmentNodeIdsRef = useRef<Set<string>>(
+    connectionPathPausedSegmentNodeIdsRaw
+  )
+  const connectionPathPausedSegmentNodeIdsKeyRef = useRef<string>('')
+  const connectionPathPausedSegmentNodeIds =
+    setToStableKey(connectionPathPausedSegmentNodeIdsRaw) ===
+    connectionPathPausedSegmentNodeIdsKeyRef.current
+      ? connectionPathPausedSegmentNodeIdsRef.current
+      : (() => {
+          connectionPathPausedSegmentNodeIdsKeyRef.current = setToStableKey(
+            connectionPathPausedSegmentNodeIdsRaw
+          )
+          connectionPathPausedSegmentNodeIdsRef.current = connectionPathPausedSegmentNodeIdsRaw
+          return connectionPathPausedSegmentNodeIdsRaw
+        })()
 
-  const connectionPathActiveSegmentNodeIds = useMemo(() => {
+  const connectionPathActiveSegmentNodeIdsRaw = useMemo(() => {
     const active = new Set(connectionPathNodeIds)
     connectionPathPausedSegmentNodeIds.forEach((id) => active.delete(id))
     return active
   }, [connectionPathNodeIds, connectionPathPausedSegmentNodeIds])
+  const connectionPathActiveSegmentNodeIdsRef = useRef<Set<string>>(
+    connectionPathActiveSegmentNodeIdsRaw
+  )
+  const connectionPathActiveSegmentNodeIdsKeyRef = useRef<string>('')
+  const connectionPathActiveSegmentNodeIds =
+    setToStableKey(connectionPathActiveSegmentNodeIdsRaw) ===
+    connectionPathActiveSegmentNodeIdsKeyRef.current
+      ? connectionPathActiveSegmentNodeIdsRef.current
+      : (() => {
+          connectionPathActiveSegmentNodeIdsKeyRef.current = setToStableKey(
+            connectionPathActiveSegmentNodeIdsRaw
+          )
+          connectionPathActiveSegmentNodeIdsRef.current = connectionPathActiveSegmentNodeIdsRaw
+          return connectionPathActiveSegmentNodeIdsRaw
+        })()
 
   const addConnectionPathPausedNode = useCallback((nodeId: string) => {
     setConnectionPathPausedNodeIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]))