49 lines
3.5 KiB
Markdown
49 lines
3.5 KiB
Markdown
# 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.
|