From 5124b6b13438bcd36da2a798bdcab670169e425d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 23 Nov 2021 18:54:42 +0100
Subject: [PATCH] refactor(node): disconnect resize observer on unmount

---
 src/container/NodeRenderer/index.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index a60fdb88..6bb39015 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
+import React, { memo, useMemo, ComponentType, MouseEvent, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
@@ -43,20 +43,32 @@ const NodeRenderer = (props: NodeRendererProps) => {
     snapToGrid,
     nodeInternals,
   } = useStore(selector, shallow);
+  const reseizeObserverRef = useRef<ResizeObserver>();
 
   const resizeObserver = useMemo(() => {
     if (typeof ResizeObserver === 'undefined') {
       return null;
     }
 
-    return new ResizeObserver((entries: ResizeObserverEntry[]) => {
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
       const updates = entries.map((entry: ResizeObserverEntry) => ({
         id: entry.target.getAttribute('data-id') as string,
         nodeElement: entry.target as HTMLDivElement,
+        forceUpdate: true,
       }));
 
       updateNodeDimensions(updates);
     });
+
+    reseizeObserverRef.current = observer;
+
+    return observer;
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      reseizeObserverRef?.current?.disconnect();
+    };
   }, []);
 
   return (