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
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 = () => {
+
);
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({
+function EdgeWrapper({
id,
edgesFocusable,
edgesReconnectable,
@@ -263,3 +263,5 @@ export function EdgeWrapper({
);
}
+
+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({
+function NodeWrapper({
id,
onClick,
onMouseEnter,
@@ -249,3 +249,5 @@ export function NodeWrapper({
);
}
+
+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 = 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 = Pick<