From 5161cf327991d690b69700ff506c9b8a27841bc4 Mon Sep 17 00:00:00 2001
From: Alaric Baraou <alaric.baraou@gmail.com>
Date: Mon, 17 Nov 2025 01:10:00 +0900
Subject: [PATCH 1/3] prevent re-render on every store update by using shallow
 in FlowRendererComponent useStore

---
 packages/react/src/container/FlowRenderer/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx
index d5083d80..5ab094ea 100644
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -8,6 +8,7 @@ import { ZoomPane } from '../ZoomPane';
 import { Pane } from '../Pane';
 import { NodesSelection } from '../../components/NodesSelection';
 import type { ReactFlowState, Node } from '../../types';
+import { shallow } from 'zustand/shallow';
 
 export type FlowRendererProps<NodeType extends Node = Node> = Omit<
   GraphViewProps<NodeType>,
@@ -72,7 +73,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
   onViewportChange,
   isControlledViewport,
 }: FlowRendererProps<NodeType>) {
-  const { nodesSelectionActive, userSelectionActive } = useStore(selector);
+  const { nodesSelectionActive, userSelectionActive } = useStore(selector, shallow);
   const selectionKeyPressed = useKeyPress(selectionKeyCode, { target: win });
   const panActivationKeyPressed = useKeyPress(panActivationKeyCode, { target: win });
 

From 9030fab2df8285fdfb649bda6e1e885dfd228d45 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 17 Nov 2025 10:08:43 +0100
Subject: [PATCH 2/3] chore(changesets): add

---
 .changeset/curly-snails-do.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/curly-snails-do.md

diff --git a/.changeset/curly-snails-do.md b/.changeset/curly-snails-do.md
new file mode 100644
index 00000000..5560b33b
--- /dev/null
+++ b/.changeset/curly-snails-do.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Prevent unnecessary re-render in `FlowRenderer`

From 0102be3babc11ed1a5fdb883393bfdaa9bfbef45 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 17 Nov 2025 10:15:42 +0100
Subject: [PATCH 3/3] chore(flow-renderer): cleanup imports

---
 packages/react/src/container/FlowRenderer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx
index 5ab094ea..2198ce5e 100644
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -1,4 +1,5 @@
 import { memo, type ReactNode } from 'react';
+import { shallow } from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
 import { useGlobalKeyHandler } from '../../hooks/useGlobalKeyHandler';
@@ -8,7 +9,6 @@ import { ZoomPane } from '../ZoomPane';
 import { Pane } from '../Pane';
 import { NodesSelection } from '../../components/NodesSelection';
 import type { ReactFlowState, Node } from '../../types';
-import { shallow } from 'zustand/shallow';
 
 export type FlowRendererProps<NodeType extends Node = Node> = Omit<
   GraphViewProps<NodeType>,