chore(middleware): cleanup

packages/react/src/hooks/useMiddleware.ts

@@ -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!);
-    };
-  }, []);
-}

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);
+    };
+  }, []);
+}

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);
+    };
+  }, []);
+}

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';