refactor: performance

frontend/src/components/nodes/render/useRenderingNodeState.ts

@@ -4,7 +4,7 @@
  * pipeline interface.
  */
 
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
 import { useAbstractNode } from '@/lib/graph/abstractNode'
 import { ConnectionPathContext } from '@/lib/graph/flowContext'
 import { useSyncConnectionStatus } from '@/lib/graph/nodeLifecycle'
@@ -118,6 +118,8 @@ export function useRenderingNodeState(
     const viewportWidth = data?.viewportWidth ?? DEFAULT_VIEWPORT_WIDTH
     const viewportHeight = data?.viewportHeight ?? DEFAULT_VIEWPORT_HEIGHT
 
+    const deferredNodes = useDeferredValue(nodes)
+    const deferredEdges = useDeferredValue(edges)
     const srcId = incomingIds.length > 0 ? incomingIds[0] : null
     const srcNode = useMemo(
         () => (srcId ? nodes.find((n: { id: string }) => n.id === srcId) : null),
@@ -150,8 +152,8 @@ export function useRenderingNodeState(
               : ''
 
     const signatures = useMemo(
-        () => buildSourceSignatures(nodes as NodeLike[], edges as EdgeLike[], id, incomingIds),
-        [nodes, edges, id, incomingIds]
+        () => buildSourceSignatures(deferredNodes as NodeLike[], deferredEdges as EdgeLike[], id, incomingIds),
+        [deferredNodes, deferredEdges, id, incomingIds]
     )
     const {
         connectedNodeIds,