react-flow-code-review

React Flow Code Review Critical Anti-Patterns 1. Defining nodeTypes/edgeTypes Inside Components

Problem: Causes all nodes to re-mount on every render.

// BAD - recreates object every render function Flow() { const nodeTypes = { custom: CustomNode }; // WRONG return ; }

// GOOD - defined outside component const nodeTypes = { custom: CustomNode }; function Flow() { return ; }

// GOOD - useMemo if dynamic function Flow() { const nodeTypes = useMemo(() => ({ custom: CustomNode }), []); return ; }

1. Missing memo() on Custom Nodes/Edges

Problem: Custom components re-render on every parent update.

// BAD - no memoization function CustomNode({ data }: NodeProps) { return

// GOOD - wrapped in memo import { memo } from 'react'; const CustomNode = memo(function CustomNode({ data }: NodeProps) { return

1. Inline Callbacks Without useCallback

Problem: Creates new function references, breaking memoization.

// BAD - inline callback setNodes(applyNodeChanges(changes, nodes))} />

// GOOD - memoized callback const onNodesChange = useCallback( (changes) => setNodes((nds) => applyNodeChanges(changes, nds)), [] );

1. Using useReactFlow Outside Provider // BAD - will throw error function App() { const { getNodes } = useReactFlow(); // ERROR: No provider return ; }

// GOOD - wrap in provider function FlowContent() { const { getNodes } = useReactFlow(); // Works return ; }

function App() { return ( ); }

1. Storing Complex Objects in Node Data

Problem: Reference equality checks fail, causing unnecessary updates.

// BAD - new object reference every time setNodes(nodes.map(n => ({ ...n, data: { ...n.data, config: { nested: 'value' } } // New object each time })));

// GOOD - use updateNodeData for targeted updates const { updateNodeData } = useReactFlow(); updateNodeData(nodeId, { config: { nested: 'value' } });

Performance Checklist Node Rendering Custom nodes wrapped in memo() nodeTypes defined outside component or memoized Heavy computations inside nodes use useMemo Event handlers use useCallback Edge Rendering Custom edges wrapped in memo() edgeTypes defined outside component or memoized Edge path calculations are not duplicated State Updates Using functional form of setState: setNodes((nds) => ...) Not spreading entire state for single property updates Using updateNodeData for data-only changes Batch updates when adding multiple nodes/edges Viewport Not calling fitView() on every render Using fitViewOptions for initial fit only Animation durations are reasonable (< 500ms) Common Mistakes Missing Container Height // BAD - no height, flow won't render

// GOOD - explicit dimensions

Missing CSS Import // Required for default styles import '@xyflow/react/dist/style.css';

Forgetting nodrag on Interactive Elements // BAD - clicking button drags node Click

// GOOD - prevents drag Click

Not Using Position Constants // BAD - string literals

// GOOD - type-safe constants import { Position } from '@xyflow/react';

Mutating Nodes/Edges Directly // BAD - direct mutation nodes[0].position = { x: 100, y: 100 }; setNodes(nodes);

// GOOD - immutable update setNodes(nodes.map(n => n.id === '1' ? { ...n, position: { x: 100, y: 100 } } : n ));

TypeScript Issues Missing Generic Types // BAD - loses type safety const [nodes, setNodes] = useNodesState(initialNodes);

// GOOD - explicit types type MyNode = Node<{ value: number }, 'custom'>; const [nodes, setNodes] = useNodesState(initialNodes);

Wrong Props Type // BAD - using wrong type function CustomNode(props: any) { ... }

// GOOD - correct props type function CustomNode(props: NodeProps) { ... }

Review Questions Are all custom components memoized? Are nodeTypes/edgeTypes defined outside render? Are callbacks wrapped in useCallback? Is the container sized properly? Are styles imported? Is useReactFlow used inside a provider? Are interactive elements marked with nodrag? Are types used consistently throughout?