@xxmachina/components 19.3.2 → 19.4.0

package/fesm2022/xxmachina-components-extras-flow.mjs

@@ -7,7 +7,7 @@ import { createRoot } from 'react-dom/client';
 import ReactFlow, { ReactFlowProvider, MiniMap, Controls, Background, BackgroundVariant, NodeResizer, Handle, Position } from 'reactflow';
 import { CommonModule } from '@angular/common';
 
-const ReactFlowWrapper = ({ props }) => {
+const ReactFlowWrapperComponent = ({ props }) => {
     const minimapStyle = {
         height: 120,
     };
@@ -20,6 +20,14 @@ const ReactFlowWrapper = ({ props }) => {
     };
     return React.createElement(ReactFlowProvider, null, React.createElement(ReactFlow, mergedProps, React.createElement(MiniMap, { style: minimapStyle, zoomable: true, pannable: true }), React.createElement(Controls, null), React.createElement(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 })));
 };
+// Memoize ReactFlowWrapper to prevent unnecessary re-renders
+// Only re-render when nodes or edges reference changes
+const ReactFlowWrapper = React.memo(ReactFlowWrapperComponent, (prevProps, nextProps) => {
+    // Return true to skip re-render (props are equal)
+    // Return false to re-render (props have changed)
+    return (prevProps.props.nodes === nextProps.props.nodes &&
+        prevProps.props.edges === nextProps.props.edges);
+});
 
 class ReactFlowComponentStore {
     constructor() {