React Flow Usage Guide

Comprehensive patterns and best practices for building production-ready node-based UIs with React Flow (@xyflow/react v12+).

When to Use This Skill

Apply these guidelines when:

• Building workflow editors, flow diagrams, or node-based interfaces
• Creating custom node or edge components
• Implementing drag-and-drop functionality for visual programming
• Optimizing performance for graphs with 100+ nodes
• Managing flow state, save/restore, or undo/redo
• Implementing auto-layout with dagre, elkjs, or custom algorithms
• Integrating React Flow with TypeScript

Rule Categories by Priority

Priority	Category	Focus	Prefix
1	Setup & Configuration	CRITICAL	setup-
2	Performance Optimization	CRITICAL	perf-
3	Node Patterns	HIGH	node-
4	Edge Patterns	HIGH	edge-
5	State Management	HIGH	state-
6	Hooks Usage	MEDIUM	hook-
7	Layout & Positioning	MEDIUM	layout-
8	Interaction Patterns	MEDIUM	interaction-
9	TypeScript Integration	MEDIUM	typescript-

Quick Start Pattern

import { useCallback } from 'react';
import {
  ReactFlow,
  Background,
  Controls,
  MiniMap,
  useNodesState,
  useEdgesState,
  addEdge
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
];

const initialEdges = [
  { id: 'e1-2', source: '1', target: '2' },
];

// Define outside component or use useMemo
const nodeTypes = { custom: CustomNode };
const edgeTypes = { custom: CustomEdge };

function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges]
  );

  return (
    <div style={{ width: '100%', height: '100vh'...