refactor: performance

frontend/src/components/graph/FlowKeyboardShortcuts.tsx

@@ -16,7 +16,6 @@ export function FlowKeyboardShortcuts() {
   const { fitView, screenToFlowPosition } = useReactFlow()
   const graphCtx = useContext(GraphContext)
   const uiCtx = useContext(FlowUIContext)
-  const nodes = graphCtx?.nodes ?? []
   const setNodes = graphCtx?.setNodes
   const setConnectionFrom = uiCtx?.setConnectionFrom
   const flowActionsRef = uiCtx?.flowActionsRef
@@ -80,6 +79,7 @@ export function FlowKeyboardShortcuts() {
 
   useEffect(() => {
     const onKeyDown = (ev: KeyboardEvent) => {
+      const nodes = graphCtx?.graphRef?.current?.nodes ?? []
       if (ev.key === 'Escape') {
         const openDialog = document.querySelector('[role="dialog"]')
         if (openDialog && ev.target instanceof Node && openDialog.contains(ev.target)) return
@@ -152,7 +152,7 @@ export function FlowKeyboardShortcuts() {
     window.addEventListener('keydown', onKeyDown, true)
     return () => window.removeEventListener('keydown', onKeyDown, true)
   }, [
-    nodes,
+    graphCtx?.graphRef,
     setNodes,
     setConnectionFrom,
     pasteAtViewportCenter,

frontend/src/components/graph/NodeHeaderTitle.tsx

@@ -11,9 +11,7 @@ type Props = {
 export function NodeHeaderTitle({ nodeId, displayTitle }: Props) {
     const graphCtx = useContext(GraphContext)
     const uiCtx = useContext(FlowUIContext)
-    const nodes = graphCtx?.nodes ?? []
     const setNodes = graphCtx?.setNodes
-    const edges = graphCtx?.edges ?? []
     const setEdges = graphCtx?.setEdges
     const renamingNodeId = uiCtx?.renamingNodeId ?? null
     const setRenamingNodeId = uiCtx?.setRenamingNodeId
@@ -32,7 +30,9 @@ export function NodeHeaderTitle({ nodeId, displayTitle }: Props) {
     }, [isRenaming, nodeId])
 
     const applyRename = useCallback(() => {
-        if (!setNodes || !setEdges || !setRenamingNodeId) return
+        if (!setNodes || !setEdges || !setRenamingNodeId || !graphCtx?.graphRef) return
+        const nodes = graphCtx.graphRef.current.nodes
+        const edges = graphCtx.graphRef.current.edges
         const newId = inputValue.trim()
         if (!newId || newId === nodeId) {
             setRenamingNodeId(null)
@@ -46,7 +46,7 @@ export function NodeHeaderTitle({ nodeId, displayTitle }: Props) {
         setNodes(nextNodes as AppNode[])
         setEdges(nextEdges)
         setRenamingNodeId(null)
-    }, [nodeId, inputValue, nodes, edges, setNodes, setEdges, setRenamingNodeId])
+    }, [nodeId, inputValue, graphCtx?.graphRef, setNodes, setEdges, setRenamingNodeId])
 
     const cancelRename = useCallback(() => {
         setRenamingNodeId?.(null)

frontend/src/components/graph/NodeMenubar.tsx

@@ -45,10 +45,9 @@ type Props = {
 export function NodeMenubar({ nodeId, nodeType, editInputsContent, inputsMenuContent, insertTagsContent, insertMenuLabel = 'Insert', insertContentDirect, insertTagsLabel = 'Tags', nodeMenuExtraContent: nodeMenuExtraContentProp, outputMenuContent, dataMenuContent }: Props) {
     const graphCtx = useContext(GraphContext)
     const uiCtx = useContext(FlowUIContext)
-    const nodes = graphCtx?.nodes ?? []
+    const nodes = graphCtx?.graphRef?.current?.nodes ?? []
     const setNodes = graphCtx?.setNodes
     const setEdges = graphCtx?.setEdges
-
     const edges = graphCtx?.edges ?? []
     const node = nodes.find((n: any) => n.id === nodeId)
     const nodeMenuExtraContent = useMemo(

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,