Prevent resize handling after cleanup in useViewportRef

Introduces a 'cleanedUp' flag in both shared and Vue useViewportRef hooks to prevent ResizeObserver callbacks from executing after cleanup. Ensures resize handling does not occur after the component is unmounted or cleaned up, improving stability.

Author: bobsingor

.changeset/dry-chairs-lay.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/plugin-viewport': patch
+---
+
+Prevent resize handling after cleanup in useViewportRef

packages/plugin-viewport/src/shared/hooks/use-viewport-ref.ts

@@ -13,6 +13,8 @@ export function useViewportRef() {
     const container = containerRef.current;
     if (!container) return;
 
+    let cleanedUp = false;
+
     /* ---------- live rect provider --------------------------------- */
     const provideRect = (): Rect => {
       const r = container.getBoundingClientRect();
@@ -34,6 +36,7 @@ export function useViewportRef() {
 
     // Example: On resize, call setMetrics
     const resizeObserver = new ResizeObserver(() => {
+      if (cleanedUp) return;
       viewportPlugin.setViewportResizeMetrics({
         width: container.offsetWidth,
         height: container.offsetHeight,
@@ -57,9 +60,10 @@ export function useViewportRef() {
 
     // Cleanup
     return () => {
+      cleanedUp = true;
+      resizeObserver.disconnect();
       viewportPlugin.registerBoundingRectProvider(null);
       container.removeEventListener('scroll', onScroll);
-      resizeObserver.disconnect();
       unsubscribeScrollRequest();
     };
   }, [viewportPlugin]);

packages/plugin-viewport/src/vue/hooks/use-viewport-ref.ts

@@ -14,6 +14,7 @@ export function useViewportRef() {
 
     if (!container || !viewportPlugin) return;
 
+    let cleanedUp = false;
     /* ---------- live rect provider --------------------------------- */
     const provideRect = (): Rect => {
       const r = container.getBoundingClientRect();
@@ -35,6 +36,7 @@ export function useViewportRef() {
 
     // Example: On resize, call setMetrics
     const resizeObserver = new ResizeObserver(() => {
+      if (cleanedUp) return;
       viewportPlugin.setViewportResizeMetrics({
         width: container.offsetWidth,
         height: container.offsetHeight,
@@ -58,9 +60,10 @@ export function useViewportRef() {
 
     // Return cleanup function
     return () => {
+      cleanedUp = true;
+      resizeObserver.disconnect();
       viewportPlugin.registerBoundingRectProvider(null);
       container.removeEventListener('scroll', onScroll);
-      resizeObserver.disconnect();
       unsubscribeScrollRequest();
     };
   };