Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.
\nCreate basic interactive graph:
\nimport ReactFlow, { Node, Edge } from \"reactflow\";\n\nconst nodes: Node[] = [\n { id: \"1\", position: { x: 0, y: 0 }, data: { label: \"Node 1\" } },\n { id: \"2\", position: { x: 100, y: 100 }, data: { label: \"Node 2\" } },\n];\n\nconst edges: Edge[] = [{ id: \"e1-2\", source: \"1\", target: \"2\" }];\n\nexport default function Graph() {\n return <ReactFlow nodes={nodes} edges={edges} />;\n}\nBuild expandable/collapsible tree structures with parent-child relationships.
\ninterface TreeNode extends Node {\n data: {\n label: string;\n level: number;\n hasChildren: boolean;\n isExpanded: boolean;\n childCount: number;\n category: \"root\" | \"category\" | \"process\" | \"detail\";\n };\n}\nconst buildVisibleNodes = useCallback(\n (allNodes: TreeNode[], expandedIds: Set<string>, otherDeps: any[]) => {\n const visibleNodes = new Map<string, TreeNode>();\n const visibleEdges = new Map<string, TreeEdge>();\n\n // Start with root nodes\n const rootNodes = allNodes.filter((n) => n.data.level === 0);\n\n // Recursively add visible nodes\n const addVisibleChildren = (node: TreeNode) => {\n visibleNodes.set(node.id, node);\n\n if (expandedIds.has(node.id)) {\n const children = allNodes.filter((n) => n.parentNode === node.id);\n children.forEach((child) => addVisibleChildren(child));\n }\n };\n\n rootNodes.forEach((root) => addVisibleChildren(root));\n\n return {\n nodes: Array.from(visibleNodes.values()),\n edges: Array.from(visibleEdges.values()),\n };\n },\n [],\n);\nHandle large datasets with incremental rendering and memoization.
\nconst useIncrementalGraph = (\n allNodes: Node[],\n allEdges: Edge[],\n expandedList: string[],\n) => {\n const prevExpandedListRef = useRef<Set<string>>(new Set());\n const prevOtherDepsRef = useRef<any[]>([]);\n\n const { visibleNodes, visibleEdges } = useMemo(() => {\n const currentExpandedSet = new Set(expandedList);\n const prevExpandedSet = prevExpandedListRef.current;\n\n // Check if expanded list changed\n const expandedChanged = !areSetsEqual(currentExpandedSet, prevExpandedSet);\n\n // Check if other dependencies changed\n const otherDepsChanged = !arraysEqual(otherDeps, prevOtherDepsRef.current);\n\n if (expandedChanged && !otherDepsChanged) {\n // Only expanded list changed - incremental update\n return buildIncrementalUpdate(\n cachedVisibleNodesRef.current,\n cachedVisibleEdgesRef.current,\n allNodes,\n allEdges,\n currentExpandedSet,\n prevExpandedSet,\n );\n } else {\n // Full rebuild needed\n return buildFullGraph(allNodes, allEdges, currentExpandedSet);\n }\n }, [allNodes, allEdges, expandedList, ...otherDeps]);\n\n return { visibleNodes, visibleEdges };\n};\n// Memoize node components to prevent unnecessary re-renders\nconst ProcessNode = memo(({ data, selected }: NodeProps) => {\n return (\n <div className={`process-node ${selected ? 'selected' : ''}`}>\n {data.label}\n </div>\n );\n}, (prevProps, nextProps) => {\n // Custom comparison function\n return (\n prevProps.data.label === nextProps.data.label &&\n prevProps.selected === nextProps.selected &&\n prevProps.data.isExpanded === nextProps.data.isExpanded\n );\n});\n\n// Memoize edge calculations\nconst styledEdges = useMemo(() => {\n return edges.map(edge => ({\n ...edge,\n style: {\n ...edge.style,\n strokeWidth: selectedEdgeId === edge.id ? 3 : 2,\n stroke: selectedEdgeId === edge.id ? '#3b82f6' : '#94a3b8',\n },\n animated: selectedEdgeId === edge.id,\n }));\n}, [edges, selectedEdgeId]);\nComplex node/edge state patterns with undo/redo and persistence.
\ntype GraphAction =\n | { type: \"SELECT_NODE\"; payload: string }\n | { type: \"SELECT_EDGE\"; payload: string }\n | { type: \"TOGGLE_EXPAND\"; payload: string }\n | { type: \"UPDATE_NODES\"; payload: Node[] }\n | { type: \"UPDATE_EDGES\"; payload: Edge[] }\n | { type: \"UNDO\" }\n | { type: \"REDO\" };\n\nconst graphReducer = (state: GraphState, action: GraphAction): GraphState => {\n switch (action.type) {\n case \"SELECT_NODE\":\n return {\n ...state,\n selectedNodeId: action.payload,\n selectedEdgeId: null,\n };\n\n case \"TOGGLE_EXPAND\":\n const newExpanded = new Set(state.expandedNodeIds);\n if (newExpanded.has(action.payload)) {\n newExpanded.delete(action.payload);\n } else {\n newExpanded.add(action.payload);\n }\n return {\n ...state,\n expandedNodeIds: newExpanded,\n isDirty: true,\n };\n\n default:\n return state;\n }\n};\nconst useHistoryManager = (\n state: GraphState,\n dispatch: Dispatch<GraphAction>,\n) => {\n const canUndo = state.historyIndex > 0;\n const canRedo = state.historyIndex < state.history.length - 1;\n\n const undo = useCallback(() => {\n if (canUndo) {\n const newIndex = state.historyIndex - 1;\n const historyEntry = state.history[newIndex];\n\n dispatch({\n type: \"RESTORE_FROM_HISTORY\",\n payload: {\n ...historyEntry,\n historyIndex: newIndex,\n },\n });\n }\n }, [canUndo, state.historyIndex, state.history]);\n\n const saveToHistory = useCallback(() => {\n dispatch({ type: \"SAVE_TO_HISTORY\" });\n }, [dispatch]);\n\n return { canUndo, canRedo, undo, redo, saveToHistory };\n};\nIntegrate Dagre for automatic graph layout:
\nimport dagre from \"dagre\";\n\nconst layoutOptions = {\n rankdir: \"TB\", // Top to Bottom\n nodesep: 100, // Node separation\n ranksep: 150, // Rank separation\n marginx: 50,\n marginy: 50,\n edgesep: 10,\n};\n\nconst applyLayout = (nodes: Node[], edges: Edge[]) => {\n const g = new dagre.graphlib.Graph();\n g.setGraph(layoutOptions);\n g.setDefaultEdgeLabel(() => ({}));\n\n // Add nodes to graph\n nodes.forEach((node) => {\n g.setNode(node.id, { width: 200, height: 100 });\n });\n\n // Add edges to graph\n edges.forEach((edge) => {\n g.setEdge(edge.source, edge.target);\n });\n\n // Calculate layout\n dagre.layout(g);\n\n // Apply positions\n return nodes.map((node) => ({\n ...node,\n position: {\n x: g.node(node.id).x - 100,\n y: g.node(node.id).y - 50,\n },\n }));\n};\n\n// Debounce layout calculations\nconst debouncedLayout = useMemo(() => debounce(applyLayout, 150), []);\nIsolate selected nodes and their direct connections:
\nconst useFocusMode = (\n selectedNodeId: string,\n allNodes: Node[],\n allEdges: Edge[],\n) => {\n return useMemo(() => {\n if (!selectedNodeId) return { nodes: allNodes, edges: allEdges };\n\n // Get direct connections\n const connectedNodeIds = new Set([selectedNodeId]);\n const focusedEdges: Edge[] = [];\n\n allEdges.forEach((edge) => {\n if (edge.source === selectedNodeId || edge.target === selectedNodeId) {\n focusedEdges.push(edge);\n connectedNodeIds.add(edge.source);\n connectedNodeIds.add(edge.target);\n }\n });\n\n // Get connected nodes\n const focusedNodes = allNodes.filter((n) => connectedNodeIds.has(n.id));\n\n return { nodes: focusedNodes, edges: focusedEdges };\n }, [selectedNodeId, allNodes, allEdges]);\n};\n\n// Smooth transitions for focus mode\nconst focusModeStyles = {\n transition: \"all 0.3s ease-in-out\",\n opacity: isInFocus ? 1 : 0.3,\n filter: isInFocus ? \"none\" : \"blur(2px)\",\n};\nSearch and navigate to specific nodes:
\nconst searchNodes = useCallback((nodes: Node[], query: string) => {\n if (!query.trim()) return [];\n\n const lowerQuery = query.toLowerCase();\n return nodes.filter(\n (node) =>\n node.data.label.toLowerCase().includes(lowerQuery) ||\n node.data.description?.toLowerCase().includes(lowerQuery),\n );\n}, []);\n\nconst navigateToSearchResult = (nodeId: string) => {\n // Expand parent nodes\n const nodePath = calculateBreadcrumbPath(nodeId, allNodes);\n const parentIds = nodePath.slice(0, -1).map((n) => n.id);\n\n setExpandedIds((prev) => new Set([...prev, ...parentIds]));\n setSelectedNodeId(nodeId);\n\n // Fit view to node\n fitView({ nodes: [{ id: nodeId }], duration: 800 });\n};\nCreate a performance analysis script:
\n// scripts/graph-analyzer.js\nclass GraphAnalyzer {\n analyzeCode(content, filePath) {\n const analysis = {\n metrics: {\n nodeCount: this.countNodes(content),\n edgeCount: this.countEdges(content),\n renderTime: this.estimateRenderTime(content),\n memoryUsage: this.estimateMemoryUsage(content),\n complexity: this.calculateComplexity(content),\n },\n issues: [],\n optimizations: [],\n patterns: this.detectPatterns(content),\n };\n\n // Detect performance issues\n this.detectPerformanceIssues(analysis);\n\n // Suggest optimizations\n this.suggestOptimizations(analysis);\n\n return analysis;\n }\n\n countNodes(content) {\n const nodePatterns = [\n /nodes:\\s*\\[.*?\\]/gs,\n /const\\s+\\w+\\s*=\\s*\\[.*?id:.*?position:/gs,\n ];\n\n let totalCount = 0;\n nodePatterns.forEach((pattern) => {\n const matches = content.match(pattern);\n if (matches) {\n matches.forEach((match) => {\n const nodeMatches = match.match(/id:\\s*['\"`][^'\"`]+['\"`]/g);\n if (nodeMatches) {\n totalCount += nodeMatches.length;\n }\n });\n }\n });\n\n return totalCount;\n }\n\n estimateRenderTime(content) {\n const nodeCount = this.countNodes(content);\n const edgeCount = this.countEdges(content);\n\n // Base render time estimation (ms)\n const baseTime = 5;\n const nodeTime = nodeCount * 0.1;\n const edgeTime = edgeCount * 0.05;\n\n return baseTime + nodeTime + edgeTime;\n }\n\n detectPerformanceIssues(analysis) {\n const { metrics } = analysis;\n\n if (metrics.nodeCount > 500) {\n analysis.issues.push({\n type: \"HIGH_NODE_COUNT\",\n severity: \"high\",\n message: `Too many nodes (${metrics.nodeCount}). Consider virtualization.`,\n suggestion: \"Implement virtualization or reduce visible nodes\",\n });\n }\n\n if (metrics.renderTime > 16) {\n analysis.issues.push({\n type: \"SLOW_RENDER\",\n severity: \"high\",\n message: `Render time (${metrics.renderTime.toFixed(2)}ms) exceeds 60fps.`,\n suggestion: \"Optimize with memoization and incremental rendering\",\n });\n }\n }\n}\n// Use Map for O(1) lookups instead of array.find\nconst nodesById = useMemo(\n () => new Map(allNodes.map((n) => [n.id, n])),\n [allNodes],\n);\n\n// Cache layout results\nconst layoutCacheRef = useRef<Map<string, Node[]>>(new Map());\n\n// Proper cleanup in useEffect\nuseEffect(() => {\n return () => {\n // Clean up any lingering references\n nodesMapRef.current.clear();\n edgesMapRef.current.clear();\n };\n}, []);\n// Use useRef for objects that shouldn't trigger re-renders\nconst autoSaveDataRef = useRef({\n nodes: [],\n edges: [],\n lastSaved: Date.now(),\n});\n\n// Update properties without breaking reference\nconst updateAutoSaveData = (newNodes: Node[], newEdges: Edge[]) => {\n autoSaveDataRef.current.nodes = newNodes;\n autoSaveDataRef.current.edges = newEdges;\n autoSaveDataRef.current.lastSaved = Date.now();\n};\nProblem: Lag during node expansion
\nSolution: Implement incremental rendering with change detection
\nProblem: Memory usage increases over time
\nSolution: Proper cleanup in useEffect hooks and use WeakMap for temporary data
\nProblem: Excessive re-renders
\nSolution: Use memo, useMemo, and useCallback with stable dependencies
\nProblem: Slow layout calculations
\nSolution: Debounce layout calculations and cache results
\nimport React, { useState, useCallback, useMemo, useRef } from 'react';\nimport ReactFlow, { Node, Edge, useReactFlow } from 'reactflow';\nimport dagre from 'dagre';\nimport { debounce } from 'lodash';\n\ninterface GraphState {\n nodes: Node[];\n edges: Edge[];\n selectedNodeId: string | null;\n expandedNodeIds: Set<string>;\n history: GraphState[];\n historyIndex: number;\n}\n\nexport default function InteractiveGraph() {\n const [state, setState] = useState<GraphState>({\n nodes: [],\n edges: [],\n selectedNodeId: null,\n expandedNodeIds: new Set(),\n history: [],\n historyIndex: 0,\n });\n\n const { fitView } = useReactFlow();\n const layoutCacheRef = useRef<Map<string, Node[]>>(new Map());\n\n // Memoized styled edges\n const styledEdges = useMemo(() => {\n return state.edges.map(edge => ({\n ...edge,\n style: {\n ...edge.style,\n strokeWidth: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target ? 3 : 2,\n stroke: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target ? '#3b82f6' : '#94a3b8',\n },\n animated: state.selectedNodeId === edge.source || state.selectedNodeId === edge.target,\n }));\n }, [state.edges, state.selectedNodeId]);\n\n // Debounced layout calculation\n const debouncedLayout = useMemo(\n () => debounce((nodes: Node[], edges: Edge[]) => {\n const cacheKey = generateLayoutCacheKey(nodes, edges);\n\n if (layoutCacheRef.current.has(cacheKey)) {\n return layoutCacheRef.current.get(cacheKey)!;\n }\n\n const layouted = applyDagreLayout(nodes, edges);\n layoutCacheRef.current.set(cacheKey, layouted);\n\n return layouted;\n }, 150),\n []\n );\n\n const handleNodeClick = useCallback((event: React.MouseEvent, node: Node) => {\n setState(prev => ({\n ...prev,\n selectedNodeId: node.id,\n }));\n }, []);\n\n const handleToggleExpand = useCallback((nodeId: string) => {\n setState(prev => {\n const newExpanded = new Set(prev.expandedNodeIds);\n if (newExpanded.has(nodeId)) {\n newExpanded.delete(nodeId);\n } else {\n newExpanded.add(nodeId);\n }\n\n return {\n ...prev,\n expandedNodeIds: newExpanded,\n };\n });\n }, []);\n\n return (\n <ReactFlow\n nodes={state.nodes}\n edges={styledEdges}\n onNodeClick={handleNodeClick}\n fitView\n />\n );\n}\nThis comprehensive skill provides everything needed to build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management patterns.
\nThis skill is applicable to execute the workflow or actions described in the overview.
\n