refactor(react): reduce initial store.setState calls

packages/react/src/container/EdgeRenderer/index.tsx

@@ -23,7 +23,6 @@ type EdgeRendererProps = Pick<
   | 'onEdgeUpdateEnd'
   | 'edgeUpdaterRadius'
   | 'noPanClassName'
-  | 'elevateEdgesOnSelect'
   | 'rfId'
   | 'disableKeyboardA11y'
   | 'edgeTypes'
@@ -44,7 +43,6 @@ const selector = (s: ReactFlowState) => ({
 const EdgeRenderer = ({
   defaultMarkerColor,
   onlyRenderVisibleElements,
-  elevateEdgesOnSelect,
   rfId,
   edgeTypes,
   noPanClassName,
@@ -89,7 +87,6 @@ const EdgeRenderer = ({
             rfId={rfId}
             onError={onError}
             edgeTypes={edgeTypes}
-            elevateEdgesOnSelect={elevateEdgesOnSelect}
           />
         );
       })}

packages/react/src/container/GraphView/index.tsx

@@ -12,7 +12,7 @@ import useNodeOrEdgeTypesWarning from './useNodeOrEdgeTypesWarning';
 
 export type GraphViewProps = Omit<
   ReactFlowProps,
-  'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd'
+  'onSelectionChange' | 'nodes' | 'edges' | 'onMove' | 'onMoveStart' | 'onMoveEnd' | 'elevateEdgesOnSelect'
 > &
   Required<
     Pick<
@@ -96,7 +96,6 @@ const GraphView = ({
   noDragClassName,
   noWheelClassName,
   noPanClassName,
-  elevateEdgesOnSelect,
   disableKeyboardA11y,
   nodeOrigin,
   nodeExtent,
@@ -164,7 +163,6 @@ const GraphView = ({
           edgeUpdaterRadius={edgeUpdaterRadius}
           defaultMarkerColor={defaultMarkerColor}
           noPanClassName={noPanClassName}
-          elevateEdgesOnSelect={!!elevateEdgesOnSelect}
           disableKeyboardA11y={disableKeyboardA11y}
           rfId={rfId}
         >

packages/react/src/container/ReactFlow/index.tsx

@@ -2,7 +2,6 @@ import { forwardRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import {
   ConnectionLineType,
-  ConnectionMode,
   PanOnScrollMode,
   SelectionMode,
   infiniteExtent,
@@ -21,8 +20,7 @@ import Wrapper from './Wrapper';
 import type { ReactFlowProps, ReactFlowRefType } from '../../types';
 import useColorModeClass from '../../hooks/useColorModeClass';
 
-const initNodeOrigin: NodeOrigin = [0, 0];
-const initSnapGrid: [number, number] = [15, 15];
+export const initNodeOrigin: NodeOrigin = [0, 0];
 const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
 const wrapperStyle: CSSProperties = {
@@ -72,7 +70,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onSelectionContextMenu,
       onSelectionStart,
       onSelectionEnd,
-      connectionMode = ConnectionMode.Strict,
+      connectionMode,
       connectionLineType = ConnectionLineType.Bezier,
       connectionLineStyle,
       connectionLineComponent,
@@ -84,10 +82,10 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       panActivationKeyCode = 'Space',
       multiSelectionKeyCode = isMacOs() ? 'Meta' : 'Control',
       zoomActivationKeyCode = isMacOs() ? 'Meta' : 'Control',
-      snapToGrid = false,
-      snapGrid = initSnapGrid,
+      snapToGrid,
+      snapGrid,
       onlyRenderVisibleElements = false,
-      selectNodesOnDrag = true,
+      selectNodesOnDrag,
       nodesDraggable,
       nodesConnectable,
       nodesFocusable,
@@ -130,18 +128,18 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       noDragClassName = 'nodrag',
       noWheelClassName = 'nowheel',
       noPanClassName = 'nopan',
-      fitView = false,
+      fitView,
       fitViewOptions,
-      connectOnClick = true,
+      connectOnClick,
       attributionPosition,
       proOptions,
       defaultEdgeOptions,
-      elevateNodesOnSelect = true,
-      elevateEdgesOnSelect = false,
+      elevateNodesOnSelect,
+      elevateEdgesOnSelect,
       disableKeyboardA11y = false,
-      autoPanOnConnect = true,
-      autoPanOnNodeDrag = true,
-      connectionRadius = 20,
+      autoPanOnConnect,
+      autoPanOnNodeDrag,
+      connectionRadius,
       isValidConnection,
       onError,
       style,
@@ -226,7 +224,6 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             noDragClassName={noDragClassName}
             noWheelClassName={noWheelClassName}
             noPanClassName={noPanClassName}
-            elevateEdgesOnSelect={elevateEdgesOnSelect}
             rfId={rfId}
             disableKeyboardA11y={disableKeyboardA11y}
             nodeOrigin={nodeOrigin}
@@ -251,6 +248,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             edgesUpdatable={edgesUpdatable}
             elementsSelectable={elementsSelectable}
             elevateNodesOnSelect={elevateNodesOnSelect}
+            elevateEdgesOnSelect={elevateEdgesOnSelect}
             minZoom={minZoom}
             maxZoom={maxZoom}
             nodeExtent={nodeExtent}