react-flow-code-review

Memoization in React Flow involves wrapping custom nodes and edges with React.memo to prevent unnecessary re-renders, stabilizing nodeTypes outside the render function, and using useCallback for event handlers. This reduces re-renders when props haven't changed, improving performance in complex graphs.

Defining nodeTypes outside render ensures they maintain a stable reference across re-renders. If nodeTypes is recreated on each render, React Flow treats them as new types and re-initializes nodes, causing performance degradation and breaking memoization.

Use useCallback to memoize event handlers like onNodesChange and onEdgesChange. This prevents child nodes and edges from re-rendering when callback references change, maintaining performance in large graphs while ensuring proper event handling.

Yes, React Flow (@xyflow/react) requires wrapping components in a ReactFlowProvider. This establishes the context required for graph state management, node/edge rendering, and internal event handling to function correctly.

Immutable updates to nodes and edges—creating new arrays/objects rather than mutating existing ones—trigger proper React change detection. This ensures React Flow detects updates, re-renders correctly, and maintains graph state consistency without performance issues.

Yes, custom nodes and edges work with TypeScript when properly typed and memoized. Define nodeTypes and edgeTypes with correct typing, wrap components with React.memo, and follow library conventions to maintain type safety and performance.