From 5a8489bbfc50f7290d6a8d140aee5e32b6e456fd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 15 Apr 2024 22:25:33 +1000
Subject: [PATCH] perf(ui): memoize infill components

---
 .../ParamInfillColorOptions.tsx               | 16 +++++---------
 .../ParamInfillMosaicOptions.tsx              | 22 +++++--------------
 2 files changed, 10 insertions(+), 28 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx
index 1cafe4310e..be173ca6ca 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillColorOptions.tsx
@@ -1,24 +1,18 @@
 import { Box, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { selectGenerationSlice, setInfillColorValue } from 'features/parameters/store/generationSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
 
+const selectInfillColor = createMemoizedSelector(selectGenerationSlice, (generation) => generation.infillColorValue);
+
 const ParamInfillColorOptions = () => {
   const dispatch = useAppDispatch();
 
-  const selector = useMemo(
-    () =>
-      createSelector(selectGenerationSlice, (generation) => ({
-        infillColor: generation.infillColorValue,
-      })),
-    []
-  );
-
-  const { infillColor } = useAppSelector(selector);
+  const infillColor = useAppSelector(selectInfillColor);
 
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
 
diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx
index f164bb903e..cfdd7fb010 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillMosaicOptions.tsx
@@ -1,35 +1,23 @@
 import { Box, CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import {
-  selectGenerationSlice,
   setInfillMosaicMaxColor,
   setInfillMosaicMinColor,
   setInfillMosaicTileHeight,
   setInfillMosaicTileWidth,
 } from 'features/parameters/store/generationSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import type { RgbaColor } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
 
 const ParamInfillMosaicTileSize = () => {
   const dispatch = useAppDispatch();
 
-  const selector = useMemo(
-    () =>
-      createSelector(selectGenerationSlice, (generation) => ({
-        infillMosaicTileWidth: generation.infillMosaicTileWidth,
-        infillMosaicTileHeight: generation.infillMosaicTileHeight,
-        infillMosaicMinColor: generation.infillMosaicMinColor,
-        infillMosaicMaxColor: generation.infillMosaicMaxColor,
-      })),
-    []
-  );
-
-  const { infillMosaicTileWidth, infillMosaicTileHeight, infillMosaicMinColor, infillMosaicMaxColor } =
-    useAppSelector(selector);
-
+  const infillMosaicTileWidth = useAppSelector((s) => s.generation.infillMosaicTileWidth);
+  const infillMosaicTileHeight = useAppSelector((s) => s.generation.infillMosaicTileHeight);
+  const infillMosaicMinColor = useAppSelector((s) => s.generation.infillMosaicMinColor);
+  const infillMosaicMaxColor = useAppSelector((s) => s.generation.infillMosaicMaxColor);
   const infillMethod = useAppSelector((s) => s.generation.infillMethod);
 
   const { t } = useTranslation();