refactor(applyChanges): use specific replace events instead of a rough reset

examples/react/cypress/components/utils/apply-changes.cy.ts

@@ -156,20 +156,22 @@ describe('applyChanges Testing', () => {
     expect(nextNodes[0].computed).to.be.deep.equal({ width: newWidth, height: newHeight });
   });
 
-  it('resets nodes/edges', () => {
+  it('replaces nodes/edges', () => {
     const nodesLength = nodes.length;
-    const nodeChanges: NodeChange[] = [{ type: 'reset', item: nodes[0] }];
+    const nodeChanges: NodeChange[] = [{ type: 'replace', id: nodes[0].id, item: nodes[1] }];
     const nextNodes = applyNodeChanges(nodeChanges, nodes);
 
     expect(nodes.length).length.to.be.equal(nodesLength);
-    expect(nextNodes.length).to.be.equal(nodeChanges.length);
+    expect(nextNodes.length).to.be.equal(nodesLength);
+    expect(nextNodes[0]).to.be.deep.equal(nodes[1]);
 
     const edgesLength = edges.length;
-    const edgeChange: EdgeChange[] = [{ type: 'reset', item: edges[0] }];
+    const edgeChange: EdgeChange[] = [{ type: 'replace', id: edges[0].id, item: edges[1] }];
     const nextEdges = applyEdgeChanges(edgeChange, edges);
 
     expect(edges.length).length.to.be.equal(edgesLength);
-    expect(nextEdges.length).to.be.equal(edgeChange.length);
+    expect(nextEdges.length).to.be.equal(edgesLength);
+    expect(nextEdges[0]).to.be.deep.equal(edges[1]);
   });
 });
 

examples/react/src/examples/UseNodesData/index.tsx

@@ -78,7 +78,7 @@ const initEdges: Edge[] = [
 ];
 
 const CustomNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
+  const [nodes, , onNodesChange] = useNodesState(initNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
 
   const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);

examples/react/src/examples/UseReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, MouseEvent, useEffect } from 'react';
+import { useCallback, MouseEvent, useEffect, useRef } from 'react';
 import {
   ReactFlow,
   Background,
@@ -68,6 +68,7 @@ const UseZoomPanHelperFlow = () => {
     getNodes,
     getEdges,
     deleteElements,
+    updateNodeData,
   } = useReactFlow();
 
   const onPaneClick = useCallback(
@@ -125,12 +126,31 @@ const UseZoomPanHelperFlow = () => {
     deleteElements({ nodes: [{ id: '2' }], edges: [{ id: 'e1-3' }] });
   }, []);
 
+  const edgeAdded = useRef(false);
+
   useEffect(() => {
-    addEdges({ id: 'e3-4', source: '3', target: '4' });
+    if (!edgeAdded.current) {
+      addEdges({ id: 'e3-4', source: '3', target: '4' });
+      edgeAdded.current = true;
+    }
   }, [addEdges]);
 
   const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
 
+  const onSetNodes = () => {
+    setNodes([
+      { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node a' } },
+      { id: 'b', position: { x: 0, y: 150 }, data: { label: 'Node b' } },
+    ]);
+
+    setEdges([{ id: 'a-b', source: 'a', target: 'b' }]);
+  };
+
+  const onUpdateNode = () => {
+    updateNodeData('1', { label: 'update' });
+    updateNodeData('2', { label: 'update' });
+  };
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -153,6 +173,8 @@ const UseZoomPanHelperFlow = () => {
         <button onClick={logNodes}>useNodes</button>
         <button onClick={deleteSelectedElements}>deleteSelectedElements</button>
         <button onClick={deleteSomeElements}>deleteSomeElements</button>
+        <button onClick={onSetNodes}>setNodes</button>
+        <button onClick={onUpdateNode}>updateNode</button>
       </Panel>
       <Background />
       <MiniMap />