From 512eb732ded37638c9fe49f209d04fc6b338e482 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 27 Dec 2025 17:04:48 +0100
Subject: [PATCH] feature: Enhance Konva rendering with React.memo optimization
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wrap PatternCanvas and PatternLayer components with React.memo to
prevent unnecessary re-renders when props haven't changed. This builds
on the existing useMemo optimizations and provides better performance
with large patterns and frequent UI updates.

Benefits:
- Prevents re-renders when parent components update
- Improves render performance during active sewing
- Smoother user experience with complex patterns

Fixes #43

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/PatternCanvas/PatternCanvas.tsx | 6 +++---
 src/components/PatternCanvas/PatternLayer.tsx  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/PatternCanvas/PatternCanvas.tsx b/src/components/PatternCanvas/PatternCanvas.tsx
index fae8a58..dbddabf 100644
--- a/src/components/PatternCanvas/PatternCanvas.tsx
+++ b/src/components/PatternCanvas/PatternCanvas.tsx
@@ -1,4 +1,4 @@
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, memo } from "react";
 import { useShallow } from "zustand/react/shallow";
 import {
   useMachineStore,
@@ -23,7 +23,7 @@ import { ZoomControls } from "./ZoomControls";
 import { PatternLayer } from "./PatternLayer";
 import { useCanvasViewport, usePatternTransform } from "@/hooks";
 
-export function PatternCanvas() {
+export const PatternCanvas = memo(function PatternCanvas() {
   // Machine store
   const { sewingProgress, machineInfo } = useMachineStore(
     useShallow((state) => ({
@@ -277,4 +277,4 @@ export function PatternCanvas() {
       </CardContent>
     </Card>
   );
-}
+});
diff --git a/src/components/PatternCanvas/PatternLayer.tsx b/src/components/PatternCanvas/PatternLayer.tsx
index d104877..c9d61f3 100644
--- a/src/components/PatternCanvas/PatternLayer.tsx
+++ b/src/components/PatternCanvas/PatternLayer.tsx
@@ -5,7 +5,7 @@
  * Handles both interactive (draggable/rotatable) and locked states
  */
 
-import { useMemo, type RefObject } from "react";
+import { useMemo, memo, type RefObject } from "react";
 import { Group, Transformer } from "react-konva";
 import type Konva from "konva";
 import type { KonvaEventObject } from "konva/lib/Node";
@@ -30,7 +30,7 @@ interface PatternLayerProps {
   attachTransformer?: () => void;
 }
 
-export function PatternLayer({
+export const PatternLayer = memo(function PatternLayer({
   pesData,
   offset,
   rotation = 0,
@@ -143,4 +143,4 @@ export function PatternLayer({
       )}
     </>
   );
-}
+});