Preventing unnecessary re-renders across the app

frontend/src/features/gallery/DeleteImageModal.tsx

@@ -28,12 +28,18 @@ import { RootState } from '../../app/store';
 import { setShouldConfirmOnDelete, SystemState } from '../system/systemSlice';
 import * as InvokeAI from '../../app/invokeai';
 import { useHotkeys } from 'react-hotkeys-hook';
+import _ from 'lodash';
 
 const systemSelector = createSelector(
   (state: RootState) => state.system,
   (system: SystemState) => {
     const { shouldConfirmOnDelete, isConnected, isProcessing } = system;
     return { shouldConfirmOnDelete, isConnected, isProcessing };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
   }
 );
 interface DeleteImageModalProps {

frontend/src/features/gallery/gallerySliceSelectors.ts

@@ -4,6 +4,7 @@ import { activeTabNameSelector } from '../options/optionsSelectors';
 import { OptionsState } from '../options/optionsSlice';
 import { SystemState } from '../system/systemSlice';
 import { GalleryState } from './gallerySlice';
+import _ from 'lodash';
 
 export const imageGallerySelector = createSelector(
   [
@@ -43,6 +44,11 @@ export const imageGallerySelector = createSelector(
       currentCategory,
       galleryWidth,
     };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
   }
 );
 
@@ -65,5 +71,10 @@ export const hoverableImageSelector = createSelector(
       galleryImageMinimumWidth: gallery.galleryImageMinimumWidth,
       activeTabName,
     };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
   }
 );

frontend/src/features/options/MainOptions/MainHeight.tsx

@@ -7,7 +7,7 @@ import { setHeight } from '../optionsSlice';
 import { fontSize } from './MainOptions';
 
 export default function MainHeight() {
-  const { height } = useAppSelector((state: RootState) => state.options);
+  const height = useAppSelector((state: RootState) => state.options.height);
   const activeTabName = useAppSelector(activeTabNameSelector);
   const dispatch = useAppDispatch();
 

frontend/src/features/options/MainOptions/MainWidth.tsx

@@ -2,14 +2,14 @@ import React, { ChangeEvent } from 'react';
 import { WIDTHS } from '../../../app/constants';
 import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
 import IAISelect from '../../../common/components/IAISelect';
-import { tabMap } from '../../tabs/InvokeTabs';
+import { activeTabNameSelector } from '../optionsSelectors';
 import { setWidth } from '../optionsSlice';
 import { fontSize } from './MainOptions';
 
 export default function MainWidth() {
-  const { width, activeTab } = useAppSelector(
+  const width = useAppSelector((state: RootState) => state.options.width);
-    (state: RootState) => state.options
+  const activeTabName = useAppSelector(activeTabNameSelector);
-  );
+
   const dispatch = useAppDispatch();
 
   const handleChangeWidth = (e: ChangeEvent<HTMLSelectElement>) =>
@@ -17,7 +17,7 @@ export default function MainWidth() {
 
   return (
     <IAISelect
-      isDisabled={tabMap[activeTab] === 'inpainting'}
+      isDisabled={activeTabName === 'inpainting'}
       label="Width"
       value={width}
       flexGrow={1}

frontend/src/features/tabs/ImageToImage/InitImagePreview.tsx

@@ -5,7 +5,9 @@ import { RootState, useAppDispatch, useAppSelector } from '../../../app/store';
 import { clearInitialImage } from '../../options/optionsSlice';
 
 export default function InitImagePreview() {
-  const { initialImage } = useAppSelector((state: RootState) => state.options);
+  const initialImage = useAppSelector(
+    (state: RootState) => state.options.initialImage
+  );
 
   const dispatch = useAppDispatch();
 

frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.tsx

@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 const inpaintingCanvasStatusIconsSelector = createSelector(
   (state: RootState) => state.inpainting,
   (inpainting: InpaintingState) => {
@@ -14,6 +16,11 @@ const inpaintingCanvasStatusIconsSelector = createSelector(
       shouldLockBoundingBox,
       shouldShowBoundingBox,
     };
+  },
+  {
+    memoizeOptions: {
+      resultEqualityCheck: _.isEqual,
+    },
   }
 );