fix(ui): usePreselectedImage causing re-renders

This hook was rerendering any time anything changed. Moved it to a logical component, put its useEffects inside the component. This reduces the effect of the rerenders to just that tiny always-null component.

Author: psychedelicious

invokeai/frontend/web/src/app/components/App.tsx

@@ -1,6 +1,8 @@
 import { Flex, Grid } from '@chakra-ui/react';
+import { useStore } from '@nanostores/react';
 import { useLogger } from 'app/logging/useLogger';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
+import { $headerComponent } from 'app/store/nanostores/headerComponent';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { PartialAppConfig } from 'app/types/invokeai';
 import ImageUploader from 'common/components/ImageUploader';
@@ -14,12 +16,10 @@ import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { memo, useCallback, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { usePreselectedImage } from '../../features/parameters/hooks/usePreselectedImage';
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
 import GlobalHotkeys from './GlobalHotkeys';
+import PreselectedImage from './PreselectedImage';
 import Toaster from './Toaster';
-import { useStore } from '@nanostores/react';
-import { $headerComponent } from 'app/store/nanostores/headerComponent';
 
 const DEFAULT_CONFIG = {};
 
@@ -36,8 +36,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
 
   const logger = useLogger('system');
   const dispatch = useAppDispatch();
-  const { handleSendToCanvas, handleSendToImg2Img, handleUseAllMetadata } =
-    usePreselectedImage(selectedImage?.imageName);
+
   const handleReset = useCallback(() => {
     localStorage.clear();
     location.reload();
@@ -59,24 +58,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
     dispatch(appStarted());
   }, [dispatch]);
 
-  useEffect(() => {
-    if (selectedImage && selectedImage.action === 'sendToCanvas') {
-      handleSendToCanvas();
-    }
-  }, [selectedImage, handleSendToCanvas]);
-
-  useEffect(() => {
-    if (selectedImage && selectedImage.action === 'sendToImg2Img') {
-      handleSendToImg2Img();
-    }
-  }, [selectedImage, handleSendToImg2Img]);
-
-  useEffect(() => {
-    if (selectedImage && selectedImage.action === 'useAllParameters') {
-      handleUseAllMetadata();
-    }
-  }, [selectedImage, handleUseAllMetadata]);
-
   const headerComponent = useStore($headerComponent);
 
   return (
@@ -112,6 +93,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
       <ChangeBoardModal />
       <Toaster />
       <GlobalHotkeys />
+      <PreselectedImage selectedImage={selectedImage} />
     </ErrorBoundary>
   );
 };

invokeai/frontend/web/src/app/components/PreselectedImage.tsx

@@ -0,0 +1,16 @@
+import { usePreselectedImage } from 'features/parameters/hooks/usePreselectedImage';
+import { memo } from 'react';
+
+type Props = {
+  selectedImage?: {
+    imageName: string;
+    action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
+  };
+};
+
+const PreselectedImage = (props: Props) => {
+  usePreselectedImage(props.selectedImage);
+  return null;
+};
+
+export default memo(PreselectedImage);

invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts

@@ -1,7 +1,7 @@
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 import { CoreMetadata } from 'features/nodes/types/types';
 import { t } from 'i18next';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAppToaster } from '../../../app/components/Toaster';
 import { useAppDispatch } from '../../../app/store/storeHooks';
 import {
@@ -13,18 +13,21 @@ import { setActiveTab } from '../../ui/store/uiSlice';
 import { initialImageSelected } from '../store/actions';
 import { useRecallParameters } from './useRecallParameters';
 
-export const usePreselectedImage = (imageName?: string) => {
+export const usePreselectedImage = (selectedImage?: {
+  imageName: string;
+  action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
+}) => {
   const dispatch = useAppDispatch();
 
   const { recallAllParameters } = useRecallParameters();
   const toaster = useAppToaster();
 
   const { currentData: selectedImageDto } = useGetImageDTOQuery(
-    imageName ?? skipToken
+    selectedImage?.imageName ?? skipToken
   );
 
   const { currentData: selectedImageMetadata } = useGetImageMetadataQuery(
-    imageName ?? skipToken
+    selectedImage?.imageName ?? skipToken
   );
 
   const handleSendToCanvas = useCallback(() => {
@@ -54,5 +57,23 @@ export const usePreselectedImage = (imageName?: string) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedImageMetadata]);
 
+  useEffect(() => {
+    if (selectedImage && selectedImage.action === 'sendToCanvas') {
+      handleSendToCanvas();
+    }
+  }, [selectedImage, handleSendToCanvas]);
+
+  useEffect(() => {
+    if (selectedImage && selectedImage.action === 'sendToImg2Img') {
+      handleSendToImg2Img();
+    }
+  }, [selectedImage, handleSendToImg2Img]);
+
+  useEffect(() => {
+    if (selectedImage && selectedImage.action === 'useAllParameters') {
+      handleUseAllMetadata();
+    }
+  }, [selectedImage, handleUseAllMetadata]);
+
   return { handleSendToCanvas, handleSendToImg2Img, handleUseAllMetadata };
 };