refactor(GraphView): reduce amounts of re-renderings

src/container/GraphView/index.tsx

@@ -4,7 +4,6 @@ import { useStoreActions, useStore } from '../../store/hooks';
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
-import useElementUpdater from '../../hooks/useElementUpdater';
 import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
@@ -12,7 +11,7 @@ import { ReactFlowProps } from '../ReactFlow';
 
 import { NodeTypesType, EdgeTypesType, ConnectionLineType } from '../../types';
 
-export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange'> {
+export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'elements'> {
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   selectionKeyCode: number;
@@ -53,7 +52,6 @@ const GraphView = ({
   multiSelectionKeyCode,
   onElementsRemove,
   deleteKeyCode,
-  elements,
   onConnect,
   onConnectStart,
   onConnectStop,
@@ -97,8 +95,6 @@ const GraphView = ({
   const currentStore = useStore();
   const { zoomIn, zoomOut, zoomTo, transform, fitView } = useZoomPanHelper();
 
-  useElementUpdater(elements);
-
   useEffect(() => {
     if (!isInitialised.current && zoomIn && zoomOut && zoomTo && transform && fitView) {
       if (onLoad) {

src/container/ReactFlow/index.tsx

@@ -9,6 +9,7 @@ if (nodeEnv !== 'production') {
 }
 
 import GraphView from '../GraphView';
+import ElementUpdater from '../../components/ElementUpdater';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
@@ -189,7 +190,6 @@ const ReactFlow = ({
           onElementsRemove={onElementsRemove}
           deleteKeyCode={deleteKeyCode}
           multiSelectionKeyCode={multiSelectionKeyCode}
-          elements={elements}
           onConnect={onConnect}
           onConnectStart={onConnectStart}
           onConnectStop={onConnectStop}
@@ -221,6 +221,7 @@ const ReactFlow = ({
           onSelectionDragStop={onSelectionDragStop}
           onSelectionContextMenu={onSelectionContextMenu}
         />
+        <ElementUpdater elements={elements} />
         {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
         {children}
       </Wrapper>

src/container/ZoomPane/index.tsx

@@ -55,13 +55,13 @@ const ZoomPane = ({
   const zoomPane = useRef<HTMLDivElement>(null);
   const prevTransform = useRef<FlowTransform>({ x: 0, y: 0, zoom: 0 });
 
+  const store = useStore();
   const d3Zoom = useStoreState((s) => s.d3Zoom);
   const d3Selection = useStoreState((s) => s.d3Selection);
   const d3ZoomHandler = useStoreState((s) => s.d3ZoomHandler);
 
   const initD3Zoom = useStoreActions((actions) => actions.initD3Zoom);
   const updateTransform = useStoreActions((actions) => actions.updateTransform);
-  const store = useStore();
 
   useResizeHandler(zoomPane);