chore(react/store): cleanup

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

@@ -56,18 +56,19 @@ const initialEdges: Edge[] = [
 const defaultEdgeOptions = {};
 
 const BasicFlow = () => {
-  const { setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } =
+  const { addNodes, setNodes, getNodes, setEdges, getEdges, deleteElements, updateNodeData, toObject, setViewport } =
     useReactFlow();
 
   const updatePos = () => {
     setNodes((nodes) =>
       nodes.map((node) => {
-        node.position = {
-          x: Math.random() * 400,
-          y: Math.random() * 400,
+        return {
+          ...node,
+          position: {
+            x: Math.random() * 400,
+            y: Math.random() * 400,
+          },
         };
-
-        return node;
       })
     );
   };
@@ -78,9 +79,10 @@ const BasicFlow = () => {
   const toggleClassnames = () => {
     setNodes((nodes) =>
       nodes.map((node) => {
-        node.className = node.className === 'light' ? 'dark' : 'light';
-
-        return node;
+        return {
+          ...node,
+          className: node.className === 'light' ? 'dark' : 'light',
+        };
       })
     );
   };
@@ -108,6 +110,14 @@ const BasicFlow = () => {
     updateNodeData('1', { label: 'update' });
     updateNodeData('2', { label: 'update' });
   };
+  const addNode = () => {
+    addNodes({
+      id: `${Math.random()}`,
+      data: { label: 'Node' },
+      position: { x: Math.random() * 300, y: Math.random() * 300 },
+      className: 'light',
+    });
+  };
 
   return (
     <ReactFlow
@@ -144,6 +154,7 @@ const BasicFlow = () => {
         <button onClick={deleteSomeElements}>deleteSomeElements</button>
         <button onClick={onSetNodes}>setNodes</button>
         <button onClick={onUpdateNode}>updateNode</button>
+        <button onClick={addNode}>addNode</button>
       </Panel>
     </ReactFlow>
   );

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

@@ -138,7 +138,6 @@ export function StoreUpdater<NodeType extends Node = Node, EdgeType extends Edge
 
         if (fieldValue === previousFieldValue) continue;
         if (typeof props[fieldName] === 'undefined') continue;
-
         // Custom handling with dedicated setters for some fields
         if (fieldName === 'nodes') setNodes(fieldValue as Node[]);
         else if (fieldName === 'edges') setEdges(fieldValue as Edge[]);

packages/react/src/store/index.ts

@@ -73,7 +73,6 @@ const createRFStore = ({
       // new dimensions and update the nodes.
       updateNodeDimensions: (updates) => {
         const {
-          nodes,
           onNodesChange,
           fitView,
           nodeLookup,
@@ -98,7 +97,7 @@ const createRFStore = ({
         if (!fitViewDone && fitViewOnInit) {
           nextFitViewDone = fitView({
             ...fitViewOnInitOptions,
-            nodes: fitViewOnInitOptions?.nodes || nodes,
+            nodes: fitViewOnInitOptions?.nodes,
           });
         }
 
@@ -107,7 +106,7 @@ const createRFStore = ({
         // has not provided an onNodesChange handler.
         // Nodes are only rendered if they have a width and height
         // attribute which they get from this handler.
-        set({ nodes, fitViewDone: nextFitViewDone });
+        set({ fitViewDone: nextFitViewDone });
 
         if (changes?.length > 0) {
           if (debug) {