From f8bf985256c8cd7cc1dba9b2fee45349916faed9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 18 Apr 2024 16:37:10 +1000
Subject: [PATCH] perf(ui): do not recreate map callback on every render

---
 .../web/src/features/regionalPrompts/util/renderers.ts       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
index bfed29c21c..b7c03efbe3 100644
--- a/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
+++ b/invokeai/frontend/web/src/features/regionalPrompts/util/renderers.ts
@@ -24,6 +24,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 const BRUSH_PREVIEW_BORDER_INNER_COLOR = 'rgba(0,0,0,1)';
 const BRUSH_PREVIEW_BORDER_OUTER_COLOR = 'rgba(255,255,255,0.8)';
+const mapId = (object: { id: string }) => object.id;
 
 /**
  * Renders the brush preview for the selected tool.
@@ -129,7 +130,7 @@ export const renderLayers = (
   tool: Tool,
   onLayerPosChanged?: (layerId: string, x: number, y: number) => void
 ) => {
-  const reduxLayerIds = reduxLayers.map((l) => l.id);
+  const reduxLayerIds = reduxLayers.map(mapId);
 
   // Remove un-rendered layers
   for (const konvaLayer of stage.find<Konva.Layer>(`.${REGIONAL_PROMPT_LAYER_NAME}`)) {
@@ -217,7 +218,7 @@ export const renderLayers = (
     assert(transparencyRect, `Transparency rect not found for layer ${reduxLayer.id}`);
 
     // Remove deleted objects
-    const objectIds = reduxLayer.objects.map((o) => o.id);
+    const objectIds = reduxLayer.objects.map(mapId);
     for (const objectNode of konvaLayer.find(`.${REGIONAL_PROMPT_LAYER_LINE_NAME}`)) {
       if (!objectIds.includes(objectNode.id())) {
         objectNode.destroy();