From d1ffc4c4dbac31d47a4036ce18a821fbefea3f73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Thu, 9 Apr 2026 17:23:27 +0300
Subject: [PATCH] feat(annotation-canvas): optimize canvas resizing by using
 refs for strokes and currentStroke

---
 components/annotation-canvas.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/annotation-canvas.tsx b/components/annotation-canvas.tsx
index fdc145c..06a1304 100644
--- a/components/annotation-canvas.tsx
+++ b/components/annotation-canvas.tsx
@@ -70,7 +70,15 @@ export const AnnotationCanvas = forwardRef<AnnotationCanvasHandle, AnnotationCan
         if (active) draw(active);
     }, []);
 
-    // Resize canvas to match container
+    // Keep a stable ref to the latest strokes/currentStroke so the resize
+    // handler can redraw without being listed as a dependency (which would
+    // re-register the listener on every stroke change).
+    const strokesRef = useRef(strokes);
+    const currentStrokeRef = useRef(currentStroke);
+    useEffect(() => { strokesRef.current = strokes; }, [strokes]);
+    useEffect(() => { currentStrokeRef.current = currentStroke; }, [currentStroke]);
+
+    // Resize canvas to match container — listener registered once, never re-added.
     useEffect(() => {
         const resizeCanvas = () => {
             const canvas = canvasRef.current;
@@ -82,13 +90,13 @@ export const AnnotationCanvas = forwardRef<AnnotationCanvasHandle, AnnotationCan
             canvas.height = rect.height;
 
             const ctx = canvas.getContext('2d');
-            if (ctx) renderStrokes(ctx, canvas, strokes, currentStroke);
+            if (ctx) renderStrokes(ctx, canvas, strokesRef.current, currentStrokeRef.current);
         };
 
         resizeCanvas();
         window.addEventListener('resize', resizeCanvas);
         return () => window.removeEventListener('resize', resizeCanvas);
-    }, [strokes, currentStroke, renderStrokes]);
+    }, [renderStrokes]); // renderStrokes is stable (useCallback with no deps that change)
 
     // Re-render on stroke changes
     useEffect(() => {