refactor(react): reduce initial store.setState calls

packages/react/src/components/EdgeWrapper/index.tsx

@@ -34,7 +34,6 @@ function EdgeWrapper({
   onEdgeUpdateEnd,
   rfId,
   edgeTypes,
-  elevateEdgesOnSelect,
   noPanClassName,
   onError,
 }: EdgeWrapperProps): JSX.Element | null {
@@ -90,7 +89,7 @@ function EdgeWrapper({
           zIndex: edge.zIndex,
           sourceNode,
           targetNode,
-          elevateOnSelect: elevateEdgesOnSelect,
+          elevateOnSelect: store.elevateEdgesOnSelect,
         });
 
         return {
@@ -98,7 +97,7 @@ function EdgeWrapper({
           ...(edgePosition || nullPosition),
         };
       },
-      [edge.source, edge.target, edge.selected, edge.zIndex, elevateEdgesOnSelect]
+      [edge.source, edge.target, edge.selected, edge.zIndex]
     ),
     shallow
   );

packages/react/src/components/NodeWrapper/index.tsx

@@ -18,6 +18,7 @@ import { handleNodeClick } from '../Nodes/utils';
 import type { NodeWrapperProps } from '../../types';
 import { arrowKeyDiffs, builtinNodeTypes } from './utils';
 import { shallow } from 'zustand/shallow';
+
 const NodeWrapper = ({
   id,
   onClick,

packages/react/src/components/StoreUpdater/index.tsx

@@ -5,10 +5,11 @@
  */
 import { useEffect, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
-import { type CoordinateExtent } from '@xyflow/system';
+import { infiniteExtent, type CoordinateExtent } from '@xyflow/system';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types';
+import { initNodeOrigin } from '../../container/ReactFlow';
 
 // these fields exist in the global store and we need to keep them up to date
 const reactFlowFieldsToTrack = [
@@ -27,6 +28,7 @@ const reactFlowFieldsToTrack = [
   'edgesFocusable',
   'edgesUpdatable',
   'elevateNodesOnSelect',
+  'elevateEdgesOnSelect',
   'minZoom',
   'maxZoom',
   'nodeExtent',
@@ -103,7 +105,18 @@ const StoreUpdater = (props: StoreUpdaterProps) => {
     };
   }, []);
 
-  const previousFields = useRef<Partial<StoreUpdaterProps>>({});
+  const previousFields = useRef<Partial<StoreUpdaterProps>>({
+    // these are values that are also passed directly to other components
+    // than the StoreUpdater. We can reduce the number of setStore calls
+    // by setting the same values here as prev fields.
+    translateExtent: infiniteExtent,
+    nodeOrigin: initNodeOrigin,
+    minZoom: 0.5,
+    maxZoom: 2,
+    elementsSelectable: true,
+    noPanClassName: 'nopan',
+    rfId: '1',
+  });
 
   useEffect(
     () => {