thedogwiththedataonit/react-flow
Overview
This skill provides comprehensive patterns and best practices for building production-ready node-based UIs with React Flow (@xyflow/react v12+). It focuses on reliable setup, performant graph rendering, custom node and edge design, state management, and TypeScript integration. Use it to accelerate building workflow editors, drag-and-drop interfaces, and interactive diagrams that scale to large graphs.
How this skill works
The skill documents core concepts (node/edge/handle shapes), essential hooks, and repeatable patterns for custom nodes, custom edges, drag-and-drop, auto-layout, and save/restore. It highlights critical configuration and performance techniques: memoizing types and callbacks, choosing simple edge types for big graphs, and minimizing re-renders in components. Examples and code snippets illustrate quick-start wiring with useNodesState/useEdgesState, onConnect handling, and useReactFlow utilities.
When to use it
- Building visual workflow editors, flow diagrams, or node-based interfaces
- Creating custom node components, multiple handles, or bespoke edge visuals
- Implementing drag-and-drop node creation and connection workflows
- Optimizing performance for graphs with 100+ nodes or frequent updates
- Managing persistent flow state, undo/redo, or restore from storage
- Integrating React Flow into a TypeScript codebase for type-safe flows
Best practices
- Import and style @xyflow/react CSS and wrap UI with ReactFlowProvider when needed
- Define nodeTypes and edgeTypes outside render or memoize them to avoid re-creates
- Memoize callbacks (onConnect, onDrop) and use simple edge types for large graphs
- Keep custom node components pure and wrap with memo to prevent unnecessary re-renders
- Use useNodesState/useEdgesState for managed updates and useReactFlow for store ops
- Validate connections (prevent self-links) and limit handle complexity per node
Example use cases
- A visual automation builder with custom action nodes, labeled edges, and save/restore
- An IDE-like dataflow editor supporting drag-and-drop creation and live previews
- A large topology viewer optimized with straight edges and memoized node rendering
- A collaborative flow editor that serializes viewport and state for share links
- A TypeScript-first editor with typed node data, custom hooks, and strict typings
FAQ
Ensure node components are memoized, avoid inline objects/handlers in render, and define nodeTypes outside the main component or wrap them in useMemo.
How do I save and restore the full flow state?
Use useReactFlow().toObject() to serialize nodes, edges, and viewport. Persist the JSON and restore by setting nodes, edges, and viewport on load.
