refactor(node-renderer): simplify selectors, remove reselect, cleanup

packages/react/src/container/NodeRenderer/useResizeObserver.ts

@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import { ReactFlowState } from '../../types';
+import { useStore } from '../../hooks/useStore';
+
+const selector = (s: ReactFlowState) => s.updateNodeDimensions;
+
+export default function useResizeObserver() {
+  const updateNodeDimensions = useStore(selector);
+  const resizeObserverRef = useRef<ResizeObserver>();
+
+  const resizeObserver = useMemo(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return null;
+    }
+
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      const updates = new Map();
+
+      entries.forEach((entry: ResizeObserverEntry) => {
+        const id = entry.target.getAttribute('data-id') as string;
+        updates.set(id, {
+          id,
+          nodeElement: entry.target as HTMLDivElement,
+          forceUpdate: true,
+        });
+      });
+
+      updateNodeDimensions(updates);
+    });
+
+    resizeObserverRef.current = observer;
+
+    return observer;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      resizeObserverRef?.current?.disconnect();
+    };
+  }, []);
+
+  return resizeObserver;
+}