Merge pull request #5530 from xyflow/memoize-wrappers

Memoize wrappers

.changeset/lazy-yaks-occur.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Improve performance of adding nodes & edges

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

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;

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;

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<

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<