fix(react): call onNodesChange for uncontrolled flows that use updateNode #5062

examples/react/src/examples/Basic/index.tsx

@@ -11,6 +11,7 @@ import {
   useReactFlow,
   Panel,
   OnNodeDrag,
+  FitViewOptions,
 } from '@xyflow/react';
 
 const onNodeDrag: OnNodeDrag = (_, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
@@ -54,6 +55,9 @@ const initialEdges: Edge[] = [
 ];
 
 const defaultEdgeOptions = {};
+const fitViewOptions: FitViewOptions = {
+  padding: { top: '100px', left: '0%', right: '10%', bottom: 0.1 },
+};
 
 const BasicFlow = () => {
   const {
@@ -135,6 +139,7 @@ const BasicFlow = () => {
     <ReactFlow
       defaultNodes={initialNodes}
       defaultEdges={initialEdges}
+      onNodesChange={console.log}
       onNodeClick={onNodeClick}
       onNodeDragStop={onNodeDragStop}
       onNodeDragStart={onNodeDragStart}
@@ -146,9 +151,7 @@ const BasicFlow = () => {
       minZoom={0.2}
       maxZoom={4}
       fitView
-      fitViewOptions={{
+      fitViewOptions={fitViewOptions}
-        padding: { top: '100px', left: '0%', right: '10%', bottom: 0.1 },
-      }}
       defaultEdgeOptions={defaultEdgeOptions}
       selectNodesOnDrag={false}
       elevateEdgesOnSelect

packages/react/src/components/BatchProvider/index.tsx

@@ -40,15 +40,16 @@ export function BatchProvider<NodeType extends Node = Node, EdgeType extends Edg
       next = typeof payload === 'function' ? payload(next) : payload;
     }
 
-    if (hasDefaultNodes) {
-      setNodes(next);
-    } else {
     // When a controlled flow is used we need to collect the changes
     const changes = getElementsDiffChanges({
       items: next,
       lookup: nodeLookup,
     }) as NodeChange<NodeType>[];
 
+    if (hasDefaultNodes) {
+      setNodes(next);
+    }
+
     // We only want to fire onNodesChange if there are changes to the nodes
     if (changes.length > 0) {
       onNodesChange?.(changes);
@@ -62,7 +63,6 @@ export function BatchProvider<NodeType extends Node = Node, EdgeType extends Edg
         }
       });
     }
-    }
   }, []);
 
   const nodeQueue = useQueue<NodeType>(nodeQueueHandler);