Architect Production-Ready ReactFlow Applications

A comprehensive skill for building production-ready ReactFlow applications, covering hierarchical tree navigation, performance optimization for large graphs, and advanced state management. For hierarchical navigation, it defines a TreeNode data schema (level, hasChildren, isExpanded, childCount, category) and an incremental node-building pattern that recursively walks only expanded branches from root nodes to compute the currently visible node and edge set, rather than rendering the entire tree at once. For performance, it provides an incremental-rendering hook that diffs the expanded-node set against its previous value and only rebuilds the visible graph fully when non-expansion dependencies change, plus memoization patterns: React.memo with a custom comparator on node components, and useMemo for styled-edge recalculation keyed on selection state. State management uses a reducer with SELECT_NODE, SELECT_EDGE, TOGGLE_EXPAND, UPDATE_NODES/EDGES, and UNDO/REDO action types, plus a history manager exposing canUndo, canRedo, undo, and saveToHistory built on a history array and index. Advanced features include Dagre-based auto-layout (configurable rankdir, node and rank separation, debounced at 150ms), a focus mode that isolates a selected node plus its direct connections with a CSS opacity and blur transition for de-emphasized nodes, and search integration that filters nodes by label or description and, on selecting a result, expands the ancestor path via a breadcrumb calculation before calling ReactFlow's fitView. A bundled GraphAnalyzer script parses graph source code to estimate node and edge counts, render time, and complexity, flagging a high node count above 500 nodes and a slow render above a 16ms budget, the 60fps threshold, with concrete remediation suggestions. Memory-management guidance covers using a Map keyed by node ID for O(1) lookups instead of Array.find, caching layout results in a ref, and clearing Map references in a useEffect cleanup function; state-optimization guidance covers using useRef for data like autosave state that shouldn't trigger re-renders when mutated. A named problems-and-solutions table covers four recurring issues: lag during node expansion, fixed by incremental rendering with change detection; memory growth over time, fixed by useEffect cleanup and WeakMap for temporary data; manual-positioning conflicts with auto-layout, fixed by controlled positioning state with separate layout modes; and excessive re-renders, fixed by memo, useMemo, and useCallback with stable dependencies.

Use when building an interactive node-graph UI with ReactFlow that needs to scale past a handful of nodes - expandable and collapsible hierarchies, auto-layout, undo and redo, search-and-focus navigation, or performance work on graphs with hundreds to thousands of nodes. Not for a simple, static, small graph where none of the incremental-rendering, memoization, or history machinery is needed - the base ReactFlow quick-start pattern alone is sufficient there.

Input is a set of ReactFlow nodes and edges plus interaction state such as selection, expansion, and search query. Output is the computed visible node and edge subset, a Dagre-calculated layout, reducer-driven state transitions with undo and redo history, and, from the analyzer script, a performance report with flagged issues and suggested optimizations.

import ReactFlow, { Node, Edge } from "reactflow";

const nodes: Node[] = [
  { id: "1", position: { x: 0, y: 0 }, data: { label: "Node 1" } },
  { id: "2", position: { x: 100, y: 100 }, data: { label: "Node 2" } },
];

const edges: Edge[] = [{ id: "e1-2", source: "1", target: "2" }];

export default function Graph() {
  return <ReactFlow nodes={nodes} edges={edges} />;
}

Built on ReactFlow, with Dagre for automatic graph layout and lodash's debounce for throttling layout recalculation during rapid interaction.

Frontend engineers building complex, interactive graph or diagram UIs with ReactFlow - org charts, pipeline visualizations, hierarchical explorers - who need concrete performance and state-management patterns for graphs that outgrow the basic quick-start example.