zui/PERFORMANCE.md

Performance notes

Already in place

• Throttled node updates during drag – onNodesChange merges changes and flushes at most once per animation frame (~60 fps) so dragging doesn’t trigger hundreds of re-renders per second.
• nodeDragThreshold={1} – Avoids treating small pointer moves as drags and reduces noisy change events.
• Memoized React Flow props – nodeTypes, edgeTypes, defaultEdgeOptions, and flowContextValue are memoized so their references don’t change every render.
• Custom nodePropsAreEqual – Node components use React.memo(..., nodePropsAreEqual) so a node only re-renders when its own id, data, width, height, or selected change (e.g. dragging one node doesn’t force others to re-render when the library keeps their props reference stable).
• ConfigNode derived data – incomingEdges, incomingIds, and connected* are wrapped in useMemo so they aren’t recomputed on every render.

Further improvements you can try

1. Split context (medium effort)

Right now every component that uses useContext(FlowContext) re-renders whenever nodes or edges change. You can split into:

• FlowDataContext – nodes, edges (changes often).
• FlowActionsContext – setNodes, setEdges, isValidConnection, etc. (stable).

Components that only need actions (e.g. menus, buttons) subscribe to FlowActionsContext and won’t re-render on graph updates.

2. Avoid reading full nodes/edges where possible

React Flow’s docs recommend not depending on the full nodes/edges arrays when you only need a small slice (e.g. “selected ids”). If you add features like selection state, keep that in a separate store or state (e.g. selectedNodeIds) and have components depend on that instead of filtering nodes everywhere.

3. Lighter node content

• CodeMirror – Config and function nodes use CodeMirror; it’s heavy. Options: lazy-initialize the editor (mount only when the node is focused or visible), or use a plain <textarea> for very small/simple flows.
• Resize – NodeResizeControl and useResizeHeight add work. If you don’t need resize everywhere, make it optional or only on certain node types.

4. CSS

• Containment – BaseNode already uses contain: layout where dimensions are set. Keeping layout/paint contained per node helps.
• Simpler styles – For many nodes, avoid heavy shadows, blur, or complex animations on the node container; they can cost a lot during pan/zoom/drag.

5. RenderingNode pipeline

The render node runs Nunjucks + Kroki on signatures (config, edges, variables, functions). It already avoids re-running when irrelevant data changes. If you add more inputs, keep them in the signature pattern so the effect only runs when something that affects the result actually changes.

6. Large graphs

• Hide/collapse – For big trees, use the hidden property (or similar) so only expanded nodes are rendered.
• Virtualization – React Flow doesn’t virtualize by default. For 100+ nodes, consider only rendering nodes in view (e.g. with onlyRenderVisibleElements if/when available in your version) or a custom viewport-based filter.

7. Build / runtime

• Production build – Use vite build and test with the production build; React and Vite are much faster without dev mode and source maps.
• React DevTools Profiler – Record while dragging or editing to see which components re-render and how often; that will guide where to add more memoization or split context.