npm / @xyflow/react
@xyflow/react
What changed in @xyflow/react 12, from its official release notes, upgrade guides and advisories. Sources checked 2026-10-17.
3 breaking7 new APIs and options7 performance9 behavior and defaults2 tooling27 fixes and other
See which of these apply to your code, ranked, in your agent:
npx @unstale/cli init@xyflow/react 1255 changes
Breaking changes 3
Pane clicks no longer fire when a connection ends on the pane.
Using handleId without handleType now produces a type error.
Child nodes belonging to different parents are prevented from overlapping.
New APIs and options 7
Adds automatic panning when a user drags a selection close to the viewport edge.
Exports the NodeHandle type for use by developers.
screenToFlowPosition now accepts snapGrid in its options.
Adds a hook for applying middleware to node-change handling.
Adds zIndexMode to control how z-index is calculated for nodes and edges.
Adds the type property to EdgeProps, matching NodeProps behavior.
Adds the EdgeToolbar component for building toolbars associated with edges.
Performance 7
MiniMap no longer re-renders on every store update, improving rendering performance.
Viewport pan and zoom transforms are applied imperatively so the component renders only once.
XYDrag instances are created only for draggable nodes, reducing unnecessary runtime work.
Optimizes zooming performance when panOnScroll mode is enabled.
Prevents unnecessary updates when selectNodesOnDrag is false.
Prevents unnecessary re-renders in FlowRenderer, improving rendering efficiency.
Improves the performance of adding nodes and edges.
Behavior and default changes 9
Development now logs when a user hides attribution.
Middle-mouse viewport panning can now start from a selection rectangle.
Control can activate pane panning during a primary-button drag.
Touch panning takes precedence over drag selection when selectionOnDrag is combined with mouse-button-specific panOnDrag settings.
useKeyPress now supports key combinations containing three or more keys.
Improves the return type so the data type can be narrowed by checking the node type.
Connections now receive the current pointer position.
The default paneClickDistance value is now 1.
Selections can now be started above a node.
Tooling 2
Adds @types/react as an optional peer dependency to prevent pnpm strict-mode issues.
Adds @types/react-dom as an optional peer dependency to prevent pnpm strict-mode issues.
Fixes and other changes 27
onResizeEnd now always fires after onResizeStart during resizing.
Fixes incorrect values during resize when shouldResize returns false.
Prevents the attribution warning when the pane is not rendered.
All properties in the provider store are reset when the flow unmounts.
MiniMap continues working after ReactFlow is remounted.
MiniMap no longer zooms out to include the origin when every node is hidden.
The Background pattern offset calculation is corrected.
extent: 'parent' now resolves immediately when the parent has width or initialWidth.
An error is now invoked when a handle cannot be found.
Internal setNodes now uses the correct nodeExtent.
The type now preserves its discriminated union, improving type-safe connection state handling.
Development warnings now use library-specific messages and correct documentation links.
Prevents node resizing beyond absolute extents.
Corrects the event type passed to onNodeDrag.
The type field may be omitted; omission is equivalent to type: "default".
Remounts no longer produce an empty store, improving ReactFlow state availability during remounts.
Viewport helper functions now receive options correctly when called through useReactFlow.
Visual node selection is cleared when no nodes remain selected in the flow.
Keeps isValidConnection up to date during an ongoing connection.
Handles an undefined node in the mini map.
Keeps onConnectEnd up to date during an ongoing connection.
Fixes programmatic selection issues by consolidating drag handler effects.
Ongoing connections now update when a user moves a node with the keyboard.
The selection box resets when a user selects a node.
onPaneClick events are no longer suppressed when selectionOnDrag=true.
NodeResizer props can change while a resize is in progress.
onMoveEnd is always called when onMoveStart was called.