From 88c5480bf500b7b966d1bd76a8b5cc303fce2e48 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 8 Oct 2025 21:47:35 +0200
Subject: [PATCH] chore(middleware): cleanup

---
 packages/react/src/hooks/useMiddleware.ts     | 54 -------------------
 .../src/hooks/useOnEdgesChangeMiddleware.ts   | 24 +++++++++
 .../src/hooks/useOnNodesChangeMiddleware.ts   | 24 +++++++++
 packages/react/src/index.ts                   |  6 +--
 4 files changed, 50 insertions(+), 58 deletions(-)
 delete mode 100644 packages/react/src/hooks/useMiddleware.ts
 create mode 100644 packages/react/src/hooks/useOnEdgesChangeMiddleware.ts
 create mode 100644 packages/react/src/hooks/useOnNodesChangeMiddleware.ts

diff --git a/packages/react/src/hooks/useMiddleware.ts b/packages/react/src/hooks/useMiddleware.ts
deleted file mode 100644
index a83a0c85..00000000
--- a/packages/react/src/hooks/useMiddleware.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useEffect, useRef } from 'react';
-import type { EdgeChange, NodeChange } from '@xyflow/system';
-
-import { useStoreApi } from './useStore';
-import type { Edge, Node } from '../types';
-
-/**
- * We identify each middleware with a symbol that is unique for each hook instance.
- */
-function useSymbol() {
-  const symbol = useRef<symbol>();
-  if (!symbol.current) {
-    symbol.current = Symbol();
-  }
-  return symbol;
-}
-
-export function experimental_useOnNodesChangeMiddleware<NodeType extends Node = Node>(
-  fn: (changes: NodeChange<NodeType>[]) => NodeChange<NodeType>[]
-) {
-  const store = useStoreApi<NodeType, Edge>();
-  const symbol = useSymbol();
-
-  useEffect(() => {
-    const { onNodesChangeMiddlewareMap } = store.getState();
-    onNodesChangeMiddlewareMap.set(symbol.current!, fn);
-  }, [fn]);
-
-  useEffect(() => {
-    const { onNodesChangeMiddlewareMap } = store.getState();
-    return () => {
-      onNodesChangeMiddlewareMap.delete(symbol.current!);
-    };
-  }, []);
-}
-
-export function experimental_useOnEdgesChangeMiddleware<EdgeType extends Edge = Edge>(
-  fn: (changes: EdgeChange<EdgeType>[]) => EdgeChange<EdgeType>[]
-) {
-  const store = useStoreApi<Node, EdgeType>();
-  const symbol = useSymbol();
-
-  useEffect(() => {
-    const { onEdgesChangeMiddlewareMap } = store.getState();
-    onEdgesChangeMiddlewareMap.set(symbol.current!, fn);
-  }, [fn]);
-
-  useEffect(() => {
-    const { onEdgesChangeMiddlewareMap } = store.getState();
-    return () => {
-      onEdgesChangeMiddlewareMap.delete(symbol.current!);
-    };
-  }, []);
-}
diff --git a/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts b/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts
new file mode 100644
index 00000000..237b5280
--- /dev/null
+++ b/packages/react/src/hooks/useOnEdgesChangeMiddleware.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import type { EdgeChange } from '@xyflow/system';
+
+import { useStoreApi } from './useStore';
+import type { Edge, Node } from '../types';
+
+export function experimental_useOnEdgesChangeMiddleware<EdgeType extends Edge = Edge>(
+  fn: (changes: EdgeChange<EdgeType>[]) => EdgeChange<EdgeType>[]
+) {
+  const store = useStoreApi<Node, EdgeType>();
+  const [symbol] = useState(() => Symbol());
+
+  useEffect(() => {
+    const { onEdgesChangeMiddlewareMap } = store.getState();
+    onEdgesChangeMiddlewareMap.set(symbol, fn);
+  }, [fn]);
+
+  useEffect(() => {
+    const { onEdgesChangeMiddlewareMap } = store.getState();
+    return () => {
+      onEdgesChangeMiddlewareMap.delete(symbol);
+    };
+  }, []);
+}
diff --git a/packages/react/src/hooks/useOnNodesChangeMiddleware.ts b/packages/react/src/hooks/useOnNodesChangeMiddleware.ts
new file mode 100644
index 00000000..cf9231f8
--- /dev/null
+++ b/packages/react/src/hooks/useOnNodesChangeMiddleware.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+import type { NodeChange } from '@xyflow/system';
+
+import { useStoreApi } from './useStore';
+import type { Edge, Node } from '../types';
+
+export function experimental_useOnNodesChangeMiddleware<NodeType extends Node = Node>(
+  fn: (changes: NodeChange<NodeType>[]) => NodeChange<NodeType>[]
+) {
+  const store = useStoreApi<NodeType, Edge>();
+  const [symbol] = useState(() => Symbol());
+
+  useEffect(() => {
+    const { onNodesChangeMiddlewareMap } = store.getState();
+    onNodesChangeMiddlewareMap.set(symbol, fn);
+  }, [fn]);
+
+  useEffect(() => {
+    const { onNodesChangeMiddlewareMap } = store.getState();
+    return () => {
+      onNodesChangeMiddlewareMap.delete(symbol);
+    };
+  }, []);
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c6809d33..f251ba5d 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -30,10 +30,8 @@ export { useConnection } from './hooks/useConnection';
 export { useInternalNode } from './hooks/useInternalNode';
 export { useNodeId } from './contexts/NodeIdContext';
 
-export {
-  experimental_useOnNodesChangeMiddleware,
-  experimental_useOnEdgesChangeMiddleware,
-} from './hooks/useMiddleware';
+export { experimental_useOnNodesChangeMiddleware } from './hooks/useOnNodesChangeMiddleware';
+export { experimental_useOnEdgesChangeMiddleware } from './hooks/useOnEdgesChangeMiddleware';
 
 export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
 export { isNode, isEdge } from './utils/general';