VisualFlowState Management
Keep flows predictable with Zustand, undo/redo and server persistence.
Advanced · 11 min read · Updated Oct 31, 2026
Lift state into a store
As flows grow, prop drilling becomes painful. A small Zustand store holding nodes, edges and actions is the pattern React Flow itself uses internally.
ts
export const useFlow = create((set, get) => ({
nodes: [], edges: [],
onNodesChange: (c) => set({ nodes: applyNodeChanges(c, get().nodes) }),
onEdgesChange: (c) => set({ edges: applyEdgeChanges(c, get().edges) }),
}));Persistence
toObject() from useReactFlow serialises nodes, edges and viewport so you can save a flow and restore it exactly.