From 0c1ad4c86113949015c3cf1c012605c83e71a8dd Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 1 Oct 2025 11:33:34 +0200
Subject: [PATCH 1/2] Memoize NodeWrapper and EdgeWrapper

---
 examples/react/src/examples/Stress/index.tsx        | 10 ++++++++++
 packages/react/src/components/EdgeWrapper/index.tsx |  6 ++++--
 packages/react/src/components/NodeWrapper/index.tsx |  6 ++++--
 packages/react/src/container/EdgeRenderer/index.tsx |  2 +-
 packages/react/src/container/NodeRenderer/index.tsx |  2 +-
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/examples/react/src/examples/Stress/index.tsx b/examples/react/src/examples/Stress/index.tsx
index 496fd500..537e533b 100644
--- a/examples/react/src/examples/Stress/index.tsx
+++ b/examples/react/src/examples/Stress/index.tsx
@@ -239,6 +239,16 @@ const StressFlow = () => {
         <button onClick={remount}>re-mount</button>
         <button onClick={updatePos}>change pos</button>
         <button onClick={updateElements}>update elements</button>
+        <button
+          onClick={() => {
+            setNodes((nds) => [
+              ...nds,
+              { id: (nds.length + 1).toString(), position: { x: 0, y: 0 }, data: { label: `Node ${nds.length + 1}` } },
+            ]);
+          }}
+        >
+          Add element
+        </button>
       </Panel>
     </ReactFlow>
   );
diff --git a/packages/react/src/components/EdgeWrapper/index.tsx b/packages/react/src/components/EdgeWrapper/index.tsx
index db85bc08..7b76cdfa 100644
--- a/packages/react/src/components/EdgeWrapper/index.tsx
+++ b/packages/react/src/components/EdgeWrapper/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, type KeyboardEvent, useCallback, JSX } from 'react';
+import { useState, useMemo, useRef, type KeyboardEvent, useCallback, JSX, memo } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -15,7 +15,7 @@ import { builtinEdgeTypes, nullPosition } from './utils';
 import { EdgeUpdateAnchors } from './EdgeUpdateAnchors';
 import type { Edge, EdgeWrapperProps } from '../../types';
 
-export function EdgeWrapper<EdgeType extends Edge = Edge>({
+function EdgeWrapper<EdgeType extends Edge = Edge>({
   id,
   edgesFocusable,
   edgesReconnectable,
@@ -263,3 +263,5 @@ export function EdgeWrapper<EdgeType extends Edge = Edge>({
     </svg>
   );
 }
+
+export default memo(EdgeWrapper) as typeof EdgeWrapper;
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index bfac2087..d89ff92e 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -1,4 +1,4 @@
-import { type MouseEvent, type KeyboardEvent } from 'react';
+import { type MouseEvent, type KeyboardEvent, memo } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
@@ -20,7 +20,7 @@ import { arrowKeyDiffs, builtinNodeTypes, getNodeInlineStyleDimensions } from '.
 import { useNodeObserver } from './useNodeObserver';
 import type { InternalNode, Node, NodeWrapperProps } from '../../types';
 
-export function NodeWrapper<NodeType extends Node>({
+function NodeWrapper<NodeType extends Node>({
   id,
   onClick,
   onMouseEnter,
@@ -249,3 +249,5 @@ export function NodeWrapper<NodeType extends Node>({
     </div>
   );
 }
+
+export default memo(NodeWrapper) as typeof NodeWrapper;
diff --git a/packages/react/src/container/EdgeRenderer/index.tsx b/packages/react/src/container/EdgeRenderer/index.tsx
index 01f64f80..56ee780f 100644
--- a/packages/react/src/container/EdgeRenderer/index.tsx
+++ b/packages/react/src/container/EdgeRenderer/index.tsx
@@ -5,7 +5,7 @@ import { useStore } from '../../hooks/useStore';
 import { useVisibleEdgeIds } from '../../hooks/useVisibleEdgeIds';
 import MarkerDefinitions from './MarkerDefinitions';
 import { GraphViewProps } from '../GraphView';
-import { EdgeWrapper } from '../../components/EdgeWrapper';
+import EdgeWrapper from '../../components/EdgeWrapper';
 import type { Edge, ReactFlowState, Node } from '../../types';
 
 type EdgeRendererProps<EdgeType extends Edge = Edge> = Pick<
diff --git a/packages/react/src/container/NodeRenderer/index.tsx b/packages/react/src/container/NodeRenderer/index.tsx
index 0b055bdb..b5a61483 100644
--- a/packages/react/src/container/NodeRenderer/index.tsx
+++ b/packages/react/src/container/NodeRenderer/index.tsx
@@ -6,7 +6,7 @@ import { useStore } from '../../hooks/useStore';
 import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
 import { useResizeObserver } from './useResizeObserver';
-import { NodeWrapper } from '../../components/NodeWrapper';
+import NodeWrapper from '../../components/NodeWrapper';
 import type { Node, ReactFlowState } from '../../types';
 
 export type NodeRendererProps<NodeType extends Node> = Pick<

From 3b9951e42f2041276ac8957154598a7af41f81e9 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 1 Oct 2025 11:34:07 +0200
Subject: [PATCH 2/2] chore(changeset)

---
 .changeset/lazy-yaks-occur.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lazy-yaks-occur.md

diff --git a/.changeset/lazy-yaks-occur.md b/.changeset/lazy-yaks-occur.md
new file mode 100644
index 00000000..5a0ac136
--- /dev/null
+++ b/.changeset/lazy-yaks-occur.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Improve performance of adding nodes & edges