performance

src/components/graph/ConfigNode.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useContext, useMemo, useRef } from 'react'
 import { autocompletion } from '@codemirror/autocomplete'
 import CodeMirror from '@uiw/react-codemirror'
 import FlowContext from '../../lib/flowContext'
+import { nodePropsAreEqual } from '../../lib/flowUtils'
 import { useResizeHeight } from '../../hooks/useResizeHeight'
 import { nunjucksCompletionSource } from '../../lib/nunjucksAutocomplete'
 import { plantumlLanguage } from '../../lib/plantumlLanguage'
@@ -41,11 +42,22 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
 
     const editorRef = useRef<unknown>(null)
 
-    const incomingEdges = ctx?.edges?.filter((e: any) => e.target === id) ?? []
-    const incomingIds = incomingEdges.map((e: any) => e.source).sort()
-    const connectedConfigNodes = (ctx?.nodes ?? []).filter((n: any) => incomingIds.includes(n.id) && n.type === 'config')
-    const connectedVariableNodes = (ctx?.nodes ?? []).filter((n: any) => incomingIds.includes(n.id) && n.type === 'variable')
-    const connectedFunctionNodes = (ctx?.nodes ?? []).filter((n: any) => incomingIds.includes(n.id) && n.type === 'function')
+    const edges = ctx?.edges ?? []
+    const nodes = ctx?.nodes ?? []
+    const incomingEdges = useMemo(() => edges.filter((e: any) => e.target === id), [edges, id])
+    const incomingIds = useMemo(() => incomingEdges.map((e: any) => e.source).sort(), [incomingEdges])
+    const connectedConfigNodes = useMemo(
+        () => (nodes as any[]).filter((n: any) => incomingIds.includes(n.id) && n.type === 'config'),
+        [nodes, incomingIds]
+    )
+    const connectedVariableNodes = useMemo(
+        () => (nodes as any[]).filter((n: any) => incomingIds.includes(n.id) && n.type === 'variable'),
+        [nodes, incomingIds]
+    )
+    const connectedFunctionNodes = useMemo(
+        () => (nodes as any[]).filter((n: any) => incomingIds.includes(n.id) && n.type === 'function'),
+        [nodes, incomingIds]
+    )
     const hasDependencies = connectedConfigNodes.length > 0 || connectedVariableNodes.length > 0 || connectedFunctionNodes.length > 0
 
     const onChange = useCallback(
@@ -273,7 +285,7 @@ export const ConfigNode = memo(function ConfigNode({ id, data, width, height }:
             </BaseNodeFooter>
         </BaseNode>
     )
-})
+}, nodePropsAreEqual)
 
 ConfigNode.displayName = 'ConfigNode'
 

src/components/graph/FunctionNode.tsx

@@ -2,6 +2,7 @@ import React, { memo, useCallback, useContext, useMemo, useRef } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import FlowContext from '../../lib/flowContext'
+import { nodePropsAreEqual } from '../../lib/flowUtils'
 import { useResizeHeight } from '../../hooks/useResizeHeight'
 import { useTheme } from '../../lib/themeContext'
 import {
@@ -171,7 +172,7 @@ export const FunctionNode = memo(function FunctionNode({ id, data, width, height
             </BaseNodeFooter>
         </BaseNode>
     )
-})
+}, nodePropsAreEqual)
 
 FunctionNode.displayName = 'FunctionNode'
 

src/components/graph/RenderingNode.tsx

@@ -8,7 +8,7 @@ import {
     BaseNodeFooter,
     BaseNodeHeaderRow,
 } from './BaseNode'
-import { DEFAULT_NODE_STYLE, getDefaultDataForType, getNextNodeId } from '../../lib/flowUtils'
+import { DEFAULT_NODE_STYLE, getDefaultDataForType, getNextNodeId, nodePropsAreEqual } from '../../lib/flowUtils'
 import { NodeFooterEdgeIndicators } from './NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from './NodeHeaderTitle'
 import { NodeMenubar } from './NodeMenubar'
@@ -611,7 +611,7 @@ export const RenderingNode = memo(function RenderingNode({ id, width, height }:
         </BaseNode>
         </NodeStatusIndicator>
     )
-})
+}, nodePropsAreEqual)
 
 RenderingNode.displayName = 'RenderingNode'
 

src/components/graph/VariableNode.tsx

@@ -1,5 +1,6 @@
 import React, { memo, useCallback, useContext } from 'react'
 import FlowContext from '../../lib/flowContext'
+import { nodePropsAreEqual } from '../../lib/flowUtils'
 import {
     BaseNode,
     BaseNodeContent,
@@ -138,7 +139,7 @@ export const VariableNode = memo(function VariableNode({ id, data }: Props) {
             </BaseNodeFooter>
         </BaseNode>
     )
-})
+}, nodePropsAreEqual)
 
 VariableNode.displayName = 'VariableNode'