@sohanemon/utils 4.1.6 → 4.1.7

package/dist/hooks/index.js

@@ -303,7 +303,7 @@ export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true,
         height: 500,
         width: 500,
     });
-    const handleCalculation = () => {
+    const handleCalculation = React.useCallback(() => {
         const blocksHeight = blockIds.reduce((prevHeight, id) => prevHeight + (document.getElementById(id)?.clientHeight || 0), 0);
         const blocksWidth = blockIds.reduce((prevWidth, id) => prevWidth + (document.getElementById(id)?.clientWidth || 0), 0);
         const height = substract
@@ -312,28 +312,80 @@ export const useDomCalculation = ({ blockIds = [], margin = 0, substract = true,
         const width = substract
             ? window.innerWidth - blocksWidth - margin
             : blocksWidth + margin;
-        const newDimensions = { height, width };
-        setDimensions(newDimensions);
+        setDimensions((prev) => {
+            // Only update state if dimensions have actually changed
+            if (prev.height === height && prev.width === width) {
+                return prev;
+            }
+            return { height, width };
+        });
         onChange?.({
             blocksWidth,
             blocksHeight,
             remainingWidth: width,
             remainingHeight: height,
         });
-    };
+    }, [blockIds, margin, substract, onChange]);
     useIsomorphicEffect(() => {
         handleCalculation();
-        if (!dynamic)
-            return;
-        if (typeof dynamic === 'string') {
-            const resizableElement = document.getElementById(dynamic);
-            const resizeObserver = new ResizeObserver(() => handleCalculation());
-            if (resizableElement)
-                resizeObserver.observe(resizableElement);
-            return () => resizeObserver.disconnect();
+        const cleanups = [];
+        if (blockIds.length > 0) {
+            const observer = new MutationObserver((mutations) => {
+                let shouldRecalculate = false;
+                for (const mutation of mutations) {
+                    for (const node of mutation.addedNodes) {
+                        if (node instanceof Element) {
+                            if (blockIds.includes(node.id) ||
+                                blockIds.some((id) => node.querySelector(`#${CSS.escape(id)}`))) {
+                                shouldRecalculate = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (shouldRecalculate)
+                        break;
+                    for (const node of mutation.removedNodes) {
+                        if (node instanceof Element) {
+                            if (blockIds.includes(node.id) ||
+                                blockIds.some((id) => node.querySelector(`#${CSS.escape(id)}`))) {
+                                shouldRecalculate = true;
+                                break;
+                            }
+                        }
+                    }
+                    if (shouldRecalculate)
+                        break;
+                }
+                if (shouldRecalculate) {
+                    handleCalculation();
+                }
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            cleanups.push(() => observer.disconnect());
         }
-        window.addEventListener('resize', handleCalculation);
-        return () => window.removeEventListener('resize', handleCalculation);
-    }, []);
+        if (dynamic) {
+            if (typeof dynamic === 'string') {
+                const resizableElement = document.getElementById(dynamic);
+                if (resizableElement) {
+                    const resizeObserver = new ResizeObserver(handleCalculation);
+                    resizeObserver.observe(resizableElement);
+                    cleanups.push(() => resizeObserver.unobserve(resizableElement));
+                    cleanups.push(() => resizeObserver.disconnect());
+                }
+            }
+            else {
+                window.addEventListener('resize', handleCalculation);
+                cleanups.push(() => window.removeEventListener('resize', handleCalculation));
+            }
+        }
+        return () => {
+            for (const cleanup of cleanups) {
+                cleanup();
+            }
+        };
+    }, [handleCalculation, dynamic, blockIds.join(',')]);
     return dimensions;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.1.6",
+  "version": "4.1.7",
   "author": "Sohan Emon <sohanemon@outlook.com>",
   "description": "",
   "type": "module",