refactor(wrapNode): dont call dimension update twice on mount #1075

src/components/Nodes/wrapNode.tsx

@@ -1,4 +1,14 @@
-import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react';
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  memo,
+  ComponentType,
+  CSSProperties,
+  useMemo,
+  MouseEvent,
+  useCallback,
+} from 'react';
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable';
 import cc from 'classcat';
 
@@ -39,6 +49,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     isDragging,
     resizeObserver,
   }: WrapNodeProps) => {
+    const observerInitialized = useRef<boolean>(false);
     const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
     const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
     const updateNodePosDiff = useStoreActions((actions) => actions.updateNodePosDiff);
@@ -191,21 +202,22 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       [node, onNodeDoubleClick]
     );
 
-    useEffect(() => {
-      if (nodeElement.current && !isHidden) {
+    useLayoutEffect(() => {
+      // the resize observer calls an updateNodeDimensions initially.
+      // We don't need to force another dimension update if it hasn't happened yet
+      if (nodeElement.current && !isHidden && observerInitialized.current) {
         updateNodeDimensions([{ id, nodeElement: nodeElement.current, forceUpdate: true }]);
       }
     }, [id, isHidden, sourcePosition, targetPosition]);
 
     useEffect(() => {
       if (nodeElement.current) {
+        observerInitialized.current = true;
         const currNode = nodeElement.current;
         resizeObserver?.observe(currNode);
 
         return () => resizeObserver?.unobserve(currNode);
       }
-
-      return;
     }, []);
 
     if (isHidden) {