fix(ui): fix selector memoization

Every `GalleryImage` was rerendering any time the app rerendered bc the selector function itself was not memoized. This resulted in the memoization cache inside the selector constantly being reset.

Same for `BatchImage`.

Also updated memoization for a few other selectors.

invokeai/frontend/web/src/features/batch/components/BatchImage.tsx

@@ -1,28 +1,29 @@
 import { Box, Icon, Skeleton } from '@chakra-ui/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { TypesafeDraggableData } from 'app/components/ImageDnd/typesafeDnd';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { FaExclamationCircle } from 'react-icons/fa';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useGetImageDTOQuery } from 'services/api/endpoints/images';
+import IAIDndImage from 'common/components/IAIDndImage';
-import { MouseEvent, memo, useCallback, useMemo } from 'react';
 import {
   batchImageRangeEndSelected,
   batchImageSelected,
   batchImageSelectionToggled,
   imageRemovedFromBatch,
 } from 'features/batch/store/batchSlice';
-import IAIDndImage from 'common/components/IAIDndImage';
+import { MouseEvent, memo, useCallback, useMemo } from 'react';
-import { createSelector } from '@reduxjs/toolkit';
+import { FaExclamationCircle } from 'react-icons/fa';
-import { RootState, stateSelector } from 'app/store/store';
+import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { TypesafeDraggableData } from 'app/components/ImageDnd/typesafeDnd';
 
-const isSelectedSelector = createSelector(
+const makeSelector = (image_name: string) =>
-  [stateSelector, (state: RootState, imageName: string) => imageName],
+  createSelector(
-  (state, imageName) => ({
+    [stateSelector],
+    (state) => ({
       selection: state.batch.selection,
-    isSelected: state.batch.selection.includes(imageName),
+      isSelected: state.batch.selection.includes(image_name),
     }),
     defaultSelectorOptions
-);
+  );
 
 type BatchImageProps = {
   imageName: string;
@@ -37,10 +38,13 @@ const BatchImage = (props: BatchImageProps) => {
   } = useGetImageDTOQuery(props.imageName);
   const dispatch = useAppDispatch();
 
-  const { isSelected, selection } = useAppSelector((state) =>
+  const selector = useMemo(
-    isSelectedSelector(state, props.imageName)
+    () => makeSelector(props.imageName),
+    [props.imageName]
   );
 
+  const { isSelected, selection } = useAppSelector(selector);
+
   const handleClickRemove = useCallback(() => {
     dispatch(imageRemovedFromBatch(props.imageName));
   }, [dispatch, props.imageName]);

invokeai/frontend/web/src/features/gallery/components/GalleryImage.tsx

@@ -1,25 +1,26 @@
 import { Box } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { MouseEvent, memo, useCallback, useMemo } from 'react';
-import { FaTrash } from 'react-icons/fa';
-import { useTranslation } from 'react-i18next';
 import { createSelector } from '@reduxjs/toolkit';
-import { ImageDTO } from 'services/api/types';
 import { TypesafeDraggableData } from 'app/components/ImageDnd/typesafeDnd';
 import { stateSelector } from 'app/store/store';
-import ImageContextMenu from './ImageContextMenu';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDndImage from 'common/components/IAIDndImage';
+import { imageToDeleteSelected } from 'features/imageDeletion/store/imageDeletionSlice';
+import { MouseEvent, memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaTrash } from 'react-icons/fa';
+import { ImageDTO } from 'services/api/types';
 import {
   imageRangeEndSelected,
   imageSelected,
   imageSelectionToggled,
 } from '../store/gallerySlice';
-import { imageToDeleteSelected } from 'features/imageDeletion/store/imageDeletionSlice';
+import ImageContextMenu from './ImageContextMenu';
 
-export const selector = createSelector(
+export const makeSelector = (image_name: string) =>
-  [stateSelector, (state, { image_name }: ImageDTO) => image_name],
+  createSelector(
-  ({ gallery }, image_name) => {
+    [stateSelector],
+    ({ gallery }) => {
       const isSelected = gallery.selection.includes(image_name);
       const selection = gallery.selection;
       return {
@@ -28,7 +29,7 @@ export const selector = createSelector(
       };
     },
     defaultSelectorOptions
-);
+  );
 
 interface HoverableImageProps {
   imageDTO: ImageDTO;
@@ -38,13 +39,13 @@ interface HoverableImageProps {
  * Gallery image component with delete/use all/use seed buttons on hover.
  */
 const GalleryImage = (props: HoverableImageProps) => {
-  const { isSelected, selection } = useAppSelector((state) =>
-    selector(state, props.imageDTO)
-  );
-
   const { imageDTO } = props;
   const { image_url, thumbnail_url, image_name } = imageDTO;
 
+  const localSelector = useMemo(() => makeSelector(image_name), [image_name]);
+
+  const { isSelected, selection } = useAppSelector(localSelector);
+
   const dispatch = useAppDispatch();
 
   const { t } = useTranslation();

invokeai/frontend/web/src/features/lora/components/ParamLoraList.tsx

@@ -1,14 +1,19 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { map } from 'lodash-es';
 import ParamLora from './ParamLora';
 
-const selector = createSelector(stateSelector, ({ lora }) => {
+const selector = createSelector(
+  stateSelector,
+  ({ lora }) => {
     const { loras } = lora;
 
     return { loras };
-});
+  },
+  defaultSelectorOptions
+);
 
 const ParamLoraList = () => {
   const { loras } = useAppSelector(selector);

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamCFGScale.tsx

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
@@ -27,7 +28,8 @@ const selector = createSelector(
       shouldUseSliders,
       shift,
     };
-  }
+  },
+  defaultSelectorOptions
 );
 
 const ParamCFGScale = () => {

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamHeight.tsx

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setHeight } from 'features/parameters/store/generationSlice';
@@ -25,7 +26,8 @@ const selector = createSelector(
       inputMax,
       step,
     };
-  }
+  },
+  defaultSelectorOptions
 );
 
 type ParamHeightProps = Omit<

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx

@@ -1,17 +1,16 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 import IAISlider from 'common/components/IAISlider';
-import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setIterations } from 'features/parameters/store/generationSlice';
-import { configSelector } from 'features/system/store/configSelectors';
-import { hotkeysSelector } from 'features/ui/store/hotkeysSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createSelector([stateSelector], (state) => {
+const selector = createSelector(
+  [stateSelector],
+  (state) => {
     const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
       state.config.sd.iterations;
     const { iterations } = state.generation;
@@ -31,7 +30,9 @@ const selector = createSelector([stateSelector], (state) => {
       shouldUseSliders,
       isDisabled,
     };
-});
+  },
+  defaultSelectorOptions
+);
 
 const ParamIterations = () => {
   const {

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSteps.tsx

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAINumberInput from 'common/components/IAINumberInput';
 
 import IAISlider from 'common/components/IAISlider';
@@ -33,7 +34,8 @@ const selector = createSelector(
       step,
       shouldUseSliders,
     };
-  }
+  },
+  defaultSelectorOptions
 );
 
 const ParamSteps = () => {

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamWidth.tsx

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import IAISlider from 'common/components/IAISlider';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { IAIFullSliderProps } from 'common/components/IAISlider';
+import IAISlider, { IAIFullSliderProps } from 'common/components/IAISlider';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { setWidth } from 'features/parameters/store/generationSlice';
 import { configSelector } from 'features/system/store/configSelectors';
@@ -26,7 +26,8 @@ const selector = createSelector(
       inputMax,
       step,
     };
-  }
+  },
+  defaultSelectorOptions
 );
 
 type ParamWidthProps = Omit<IAIFullSliderProps, 'label' | 'value' | 'onChange'>;