chore: add useCallback for getPoints

box · Dec 17, 2020 · 757f610 · 757f610
1 parent 1bccb90
commit 757f610
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/drawing/DrawingCreator.tsx b/src/drawing/DrawingCreator.tsx
@@ -30,7 +30,7 @@ export default function DrawingCreator({ className, onStart, onStop, stroke = de
     const drawingSVGRef = React.useRef<DrawingSVGRef>(null);
     const renderHandleRef = React.useRef<number | null>(null);
 
-    const getPoints = (): Array<Position> => {
+    const getPoints = React.useCallback((): Array<Position> => {
         const { current: creatorEl } = creatorElRef;
         const { current: points } = capturedPointsRef;
 
@@ -47,7 +47,8 @@ export default function DrawingCreator({ className, onStart, onStop, stroke = de
             x: (Math.min(MAX_X, Math.max(minSize, x)) / width) * 100,
             y: (Math.min(MAX_Y, Math.max(minSize, y)) / height) * 100,
         }));
-    };
+    }, [stroke]);
+
     const getPosition = (x: number, y: number): [number, number] => {
         const { current: creatorEl } = creatorElRef;
 
@@ -88,7 +89,7 @@ export default function DrawingCreator({ className, onStart, onStop, stroke = de
             paths: [{ points: adjustedPoints }],
             stroke,
         });
-    }, [onStop, setDrawingStatus, stroke]);
+    }, [getPoints, onStop, setDrawingStatus, stroke]);
 
     const updateDraw = React.useCallback(
         (x: number, y: number): void => {