Wiring React Flow's six event handlers and state setters by hand inside every editor means tedious plumbing — copy-pasting onNodesChange, onEdgesChange, and onConnect callbacks, managing node and edge arrays separately, and remembering to re-apply xyflow's change objects. Omit one handler and the graph freezes; compose them wrong and node drags & connection adds silently fail.

useFlowState is a hook that accepts an initial FlowGraph (nodes + edges) and returns a complete bundle: nodes, edges, setNodes, setEdges, and three event handlers — onNodesChange, onEdgesChange, onConnect — plus a toGraph() function to snapshot the current state for serialization. All handlers are memoized and use React Flow's standard applyNodeChanges, applyEdgeChanges, and addEdge utilities under the hood.

Call const state = useFlowState(initial), then spread the bundle into <FlowCanvas nodes={state.nodes} edges={state.edges} onNodesChange={state.onNodesChange} onEdgesChange={state.onEdgesChange} onConnect={state.onConnect} />. When ready to persist or send the graph to an agent, call state.toGraph() to capture a clean FlowGraph object with no React internals.