Getting Started -> Adding Interactivity -> Handle Change Event: use applyNodeChanges and applyEdgeChanges helpers

src/App.tsx

@@ -1,13 +1,19 @@
-import ReactFlow, { Background, Controls } from 'reactflow';
+import { useState, useCallback } from 'react';
+import ReactFlow, {
+  Background,
+  Controls,
+  applyEdgeChanges,
+  applyNodeChanges,
+} from 'reactflow';
 
 // we have to import the React Flow styles for it to work
 import 'reactflow/dist/style.css';
 
-const edges = [
+const initialEdges = [
   { id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' },
 ];
 
-const nodes = [
+const initialNodes = [
   {
     id: '1',
     data: { label: 'Hello' },
@@ -22,9 +28,26 @@ const nodes = [
 ];
 
 const Flow = () => {
+  const [nodes, setNodes] = useState(initialNodes);
+  const [edges, setEdges] = useState(initialEdges);
+
+  const onNodesChange = useCallback(
+    changes => setNodes(nds => applyNodeChanges(changes, nds)),
+    [],
+  );
+  const onEdgesChange = useCallback(
+    changes => setEdges(eds => applyEdgeChanges(changes, eds)),
+    [],
+  );
+
   return (
     <div style={{ height: '100vh' }}>
-      <ReactFlow nodes={nodes} edges={edges}>
+      <ReactFlow
+        nodes={nodes}
+        onNodesChange={onNodesChange}
+        edges={edges}
+        onEdgesChange={onEdgesChange}
+      >
         <Background />
         <Controls />
       </ReactFlow>