NodeRenderer: don’t rerender unless visible nodes change

packages/react/src/hooks/useVisibleNodes.ts

@@ -1,21 +1,33 @@
-import { useCallback } from 'react';
 import { getNodesInside } from '@xyflow/system';
+import { createSelector } from 'reselect';
+import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../hooks/useStore';
 import type { Node, ReactFlowState } from '../types';
 
-function useVisibleNodes(onlyRenderVisible: boolean) {
-  const nodes = useStore(
-    useCallback(
-      (s: ReactFlowState) =>
-        onlyRenderVisible
-          ? getNodesInside<Node>(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
-          : s.nodes,
-      [onlyRenderVisible]
-    )
-  );
+const visibleNodeIdsSelector = createSelector(
+  [
+    (s: ReactFlowState) => s.nodes,
+    (s: ReactFlowState) => s.width,
+    (s: ReactFlowState) => s.height,
+    (s: ReactFlowState) => s.transform,
+    (_s: ReactFlowState, onlyRenderVisibleNodes: boolean) => onlyRenderVisibleNodes,
+  ],
+  (nodes, width, height, transform, onlyRenderVisible) =>
+    onlyRenderVisible
+      ? getNodesInside<Node>(nodes, { x: 0, y: 0, width, height }, transform, true).map((node) => node.id)
+      : nodes.map((node) => node.id),
+  {
+    memoizeOptions: {
+      resultEqualityCheck: shallow,
+    },
+  }
+);
 
-  return nodes;
+function useVisibleNodeIds(onlyRenderVisible: boolean) {
+  const nodeIds = useStore((s: ReactFlowState) => visibleNodeIdsSelector(s, onlyRenderVisible));
+
+  return nodeIds;
 }
 
-export default useVisibleNodes;
+export default useVisibleNodeIds;