refactor(node): disconnect resize observer on unmount

This commit is contained in:
moklick
2021-11-23 18:54:42 +01:00
parent ea76e55d85
commit 5124b6b134

View File

@@ -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 (