refactor(graphview): put resize handling in its own hook

example/src/index.css

@@ -176,4 +176,4 @@ nav a.active:before {
   .overview-example__add {
     display: block;
   }
-}
+}

src/container/GraphView/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, memo, CSSProperties, MouseEvent } from 'react';
-import { ResizeObserver } from 'resize-observer';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
 import NodeRenderer from '../NodeRenderer';
@@ -10,7 +9,7 @@ import useKeyPress from '../../hooks/useKeyPress';
 import useD3Zoom from '../../hooks/useD3Zoom';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
-import { getDimensions } from '../../utils';
+import useResizeHandler from '../../hooks/useResizeHandler';
 import { project, getElements } from '../../utils/graph';
 import {
   Elements,
@@ -114,7 +113,6 @@ const GraphView = ({
   const height = useStoreState((s) => s.height);
   const d3Initialised = useStoreState((s) => s.d3Initialised);
   const nodesSelectionActive = useStoreState((s) => s.nodesSelectionActive);
-  const updateSize = useStoreActions((actions) => actions.updateSize);
   const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
   const setOnConnect = useStoreActions((a) => a.setOnConnect);
   const setOnConnectStart = useStoreActions((a) => a.setOnConnectStart);
@@ -135,44 +133,7 @@ const GraphView = ({
     setNodesSelection({ isActive: false });
   };
 
-  const updateDimensions = () => {
+  useResizeHandler(rendererNode);
-    if (!rendererNode.current) {
-      return;
-    }
-
-    const size = getDimensions(rendererNode.current);
-
-    if (size.height === 0 || size.width === 0) {
-      throw new Error('The React Flow parent container needs a width and a height to render the graph.');
-    }
-
-    updateSize(size);
-  };
-
-  useEffect(() => {
-    let resizeObserver: ResizeObserver;
-
-    updateDimensions();
-    window.onresize = updateDimensions;
-
-    if (rendererNode.current) {
-      resizeObserver = new ResizeObserver((entries) => {
-        for (let _ of entries) {
-          updateDimensions();
-        }
-      });
-
-      resizeObserver.observe(rendererNode.current);
-    }
-
-    return () => {
-      window.onresize = null;
-
-      if (resizeObserver && rendererNode.current) {
-        resizeObserver.unobserve(rendererNode.current!);
-      }
-    };
-  }, []);
 
   useD3Zoom({
     zoomPane,

src/hooks/useResizeHandler.ts

@@ -0,0 +1,43 @@
+import { useEffect, MutableRefObject } from 'react';
+import { ResizeObserver } from 'resize-observer';
+import { useStoreActions } from '../store/hooks';
+
+import { getDimensions } from '../utils';
+
+export default (rendererNode: MutableRefObject<HTMLDivElement | null>) => {
+  const updateSize = useStoreActions((actions) => actions.updateSize);
+
+  useEffect(() => {
+    let resizeObserver: ResizeObserver;
+
+    const updateDimensions = () => {
+      if (!rendererNode.current) {
+        return;
+      }
+
+      const size = getDimensions(rendererNode.current);
+
+      if (size.height === 0 || size.width === 0) {
+        console.warn('The React Flow parent container needs a width and a height to render the graph.');
+      }
+
+      updateSize(size);
+    };
+
+    updateDimensions();
+    window.onresize = updateDimensions;
+
+    if (rendererNode.current) {
+      resizeObserver = new ResizeObserver(() => updateDimensions());
+      resizeObserver.observe(rendererNode.current);
+    }
+
+    return () => {
+      window.onresize = null;
+
+      if (resizeObserver && rendererNode.current) {
+        resizeObserver.unobserve(rendererNode.current!);
+      }
+    };
+  }, []);
+};

src/store/index.ts

@@ -365,8 +365,10 @@ export const storeModel: StoreModel = {
   }),
 
   updateSize: action((state, size) => {
-    state.width = size.width;
+    // when parent has no size we use these default values
-    state.height = size.height;
+    // so that the calculations don't throw any errors
+    state.width = size.width || 500;
+    state.height = size.height || 500;
   }),
 
   initD3: action((state, zoomPaneNode) => {