gedsys/react-flow-usage
Comprehensive React Flow (@xyflow/react) patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams. Use when working with React Flow for (1) building flow editors or node-based interfaces, (2) creating custom nodes and edges, (3) implementing drag-and-drop workflows, (4) optimizing performance for large graphs, (5) managing flow state and interactions, (6) implementing auto-layout or positioning, or (7) TypeScript integration with React Flow.
95
95%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
setup-nodetypes-outside.mdrules/
- title:
- Define nodeTypes and edgeTypes Outside Component
- impact:
- CRITICAL
- impactDescription:
- Defining types inside the component causes React Flow to re-initialize on every render, losing state and causing performance issues
- tags:
- react-flow, setup, performance, memoization
Define nodeTypes and edgeTypes Outside Component
Always define nodeTypes and edgeTypes outside your component or memoize them with useMemo. Defining them inline causes React Flow to treat them as new types on every render, breaking memoization and causing performance issues.
Incorrect (defined inside component):
function Flow() {
const [nodes, setNodes] = useState([]);
// ❌ Creates new object on every render
const nodeTypes = {
custom: CustomNode,
special: SpecialNode,
};
return <ReactFlow nodes={nodes} nodeTypes={nodeTypes} />;
// React Flow re-initializes, loses internal state, poor performance
}Correct (defined outside component):
// ✅ Stable reference, defined once
const nodeTypes = {
custom: CustomNode,
special: SpecialNode,
};
const edgeTypes = {
custom: CustomEdge,
};
function Flow() {
const [nodes, setNodes] = useState([]);
return <ReactFlow nodes={nodes} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />;
}Alternative (using useMemo):
function Flow() {
const [nodes, setNodes] = useState([]);
// ✅ Memoized, only created once
const nodeTypes = useMemo(() => ({
custom: CustomNode,
special: SpecialNode,
}), []);
const edgeTypes = useMemo(() => ({
custom: CustomEdge,
}), []);
return <ReactFlow nodes={nodes} nodeTypes={nodeTypes} edgeTypes={edgeTypes} />;
}Why This Matters:
- React Flow uses reference equality to check if types have changed
- New object reference triggers complete re-initialization
- Custom nodes lose internal state and remount unnecessarily
- Causes significant performance degradation
- Can break animations and interactions
Reference: Custom Nodes Documentation