feat(ui): misc perf/rerender improvements

More efficient selectors, memoized/stable references to objects, lazy popover/menu rendering.

invokeai/frontend/web/src/common/components/ImageUploader.tsx

@@ -6,9 +6,9 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import type { AnimationProps } from 'framer-motion';
 import { AnimatePresence, motion } from 'framer-motion';
-import type { KeyboardEvent, ReactNode } from 'react';
+import type { KeyboardEvent, PropsWithChildren } from 'react';
 import { memo, useCallback, useEffect, useState } from 'react';
-import type { FileRejection } from 'react-dropzone';
+import type { Accept, FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
@@ -16,6 +16,13 @@ import type { PostUploadAction } from 'services/api/types';
 
 import ImageUploadOverlay from './ImageUploadOverlay';
 
+const accept: Accept = {
+  'image/png': ['.png'],
+  'image/jpeg': ['.jpg', '.jpeg', '.png'],
+};
+
+const dropzoneRootProps = { style: {} };
+
 const selector = createMemoizedSelector(
   [stateSelector, activeTabNameSelector],
   ({ gallery }, activeTabName) => {
@@ -38,12 +45,7 @@ const selector = createMemoizedSelector(
   }
 );
 
-type ImageUploaderProps = {
+const ImageUploader = (props: PropsWithChildren) => {
-  children: ReactNode;
-};
-
-const ImageUploader = (props: ImageUploaderProps) => {
-  const { children } = props;
   const { autoAddBoardId, postUploadAction } = useAppSelector(selector);
   const toaster = useAppToaster();
   const { t } = useTranslation();
@@ -111,7 +113,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
     isDragActive,
     inputRef,
   } = useDropzone({
-    accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg', '.png'] },
+    accept,
     noClick: true,
     onDrop,
     onDragOver,
@@ -149,9 +151,9 @@ const ImageUploader = (props: ImageUploaderProps) => {
   }, []);
 
   return (
-    <Box {...getRootProps({ style: {} })} onKeyDown={handleKeyDown}>
+    <Box {...getRootProps(dropzoneRootProps)} onKeyDown={handleKeyDown}>
       <input {...getInputProps()} />
-      {children}
+      {props.children}
       <AnimatePresence>
         {isDragActive && isHandlingUpload && (
           <motion.div

invokeai/frontend/web/src/common/components/InvControl/InvLabel.tsx

@@ -1,6 +1,4 @@
 import { Flex, FormLabel, forwardRef } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
 import { InvControlGroupContext } from 'common/components/InvControl/InvControlGroup';
@@ -8,18 +6,16 @@ import { memo, useContext } from 'react';
 
 import type { InvLabelProps } from './types';
 
-const selector = createSelector(
-  stateSelector,
-  ({ system }) => system.shouldEnableInformationalPopovers
-);
-
 export const InvLabel = memo(
   forwardRef<InvLabelProps, typeof FormLabel>(
     (
       { feature, renderInfoPopoverInPortal, children, ...rest }: InvLabelProps,
       ref
     ) => {
-      const shouldEnableInformationalPopovers = useAppSelector(selector);
+      const shouldEnableInformationalPopovers = useAppSelector(
+        (state) => state.system.shouldEnableInformationalPopovers
+      );
+
       const ctx = useContext(InvControlGroupContext);
       if (feature && shouldEnableInformationalPopovers) {
         return (

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx

@@ -1,30 +1,23 @@
 import { Box } from '@chakra-ui/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import roundToHundreth from 'features/canvas/util/roundToHundreth';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const cursorPositionSelector = createMemoizedSelector(
+const cursorPositionSelector = createSelector([stateSelector], ({ canvas }) => {
-  [stateSelector],
-  ({ canvas }) => {
   const { cursorPosition } = canvas;
 
   const { cursorX, cursorY } = cursorPosition
     ? { cursorX: cursorPosition.x, cursorY: cursorPosition.y }
     : { cursorX: -1, cursorY: -1 };
 
-    return {
+  return `(${roundToHundreth(cursorX)}, ${roundToHundreth(cursorY)})`;
-      cursorCoordinatesString: `(${roundToHundreth(cursorX)}, ${roundToHundreth(
+});
-        cursorY
-      )})`,
-    };
-  }
-);
 
 const IAICanvasStatusTextCursorPos = () => {
-  const { cursorCoordinatesString } = useAppSelector(cursorPositionSelector);
+  const cursorCoordinatesString = useAppSelector(cursorPositionSelector);
   const { t } = useTranslation();
 
   return (

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

@@ -68,7 +68,7 @@ const GallerySettingsPopover = () => {
   );
 
   return (
-    <InvPopover>
+    <InvPopover isLazy>
       <InvPopoverTrigger>
         <InvIconButton
           tooltip={t('gallery.gallerySettings')}

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorDetailsTab.tsx

@@ -7,13 +7,9 @@ import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvText } from 'common/components/InvText/wrapper';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import NotesTextarea from 'features/nodes/components/flow/nodes/Invocation/NotesTextarea';
-import type {
+import { useNodeNeedsUpdate } from 'features/nodes/hooks/useNodeNeedsUpdate';
-  InvocationNode,
-  InvocationTemplate,
-} from 'features/nodes/types/invocation';
 import { isInvocationNode } from 'features/nodes/types/invocation';
-import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
+import { memo } from 'react';
-import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import EditableNodeTitle from './details/EditableNodeTitle';
@@ -30,38 +26,47 @@ const selector = createMemoizedSelector(stateSelector, ({ nodes }) => {
     ? nodes.nodeTemplates[lastSelectedNode.data.type]
     : undefined;
 
+  if (!isInvocationNode(lastSelectedNode) || !lastSelectedNodeTemplate) {
+    return;
+  }
+
   return {
-    node: lastSelectedNode,
+    nodeId: lastSelectedNode.data.id,
-    template: lastSelectedNodeTemplate,
+    nodeVersion: lastSelectedNode.data.version,
+    templateTitle: lastSelectedNodeTemplate.title,
   };
 });
 
 const InspectorDetailsTab = () => {
-  const { node, template } = useAppSelector(selector);
+  const data = useAppSelector(selector);
   const { t } = useTranslation();
 
-  if (!template || !isInvocationNode(node)) {
+  if (!data) {
     return (
       <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
     );
   }
 
-  return <Content node={node} template={template} />;
+  return (
+    <Content
+      nodeId={data.nodeId}
+      nodeVersion={data.nodeVersion}
+      templateTitle={data.templateTitle}
+    />
+  );
 };
 
 export default memo(InspectorDetailsTab);
 
 type ContentProps = {
-  node: InvocationNode;
+  nodeId: string;
-  template: InvocationTemplate;
+  nodeVersion: string;
+  templateTitle: string;
 };
 
-const Content = memo(({ node, template }: ContentProps) => {
+const Content = memo((props: ContentProps) => {
   const { t } = useTranslation();
-  const needsUpdate = useMemo(
+  const needsUpdate = useNodeNeedsUpdate(props.nodeId);
-    () => getNeedsUpdate(node, template),
-    [node, template]
-  );
   return (
     <Box position="relative" w="full" h="full">
       <ScrollableContent>
@@ -73,20 +78,20 @@ const Content = memo(({ node, template }: ContentProps) => {
           p={1}
           gap={2}
         >
-          <EditableNodeTitle nodeId={node.data.id} />
+          <EditableNodeTitle nodeId={props.nodeId} />
           <HStack>
             <InvControl label={t('nodes.nodeType')}>
               <InvText fontSize="sm" fontWeight="semibold">
-                {template.title}
+                {props.templateTitle}
               </InvText>
             </InvControl>
             <InvControl label={t('nodes.nodeVersion')} isInvalid={needsUpdate}>
               <InvText fontSize="sm" fontWeight="semibold">
-                {node.data.version}
+                {props.nodeVersion}
               </InvText>
             </InvControl>
           </HStack>
-          <NotesTextarea nodeId={node.data.id} />
+          <NotesTextarea nodeId={props.nodeId} />
         </Flex>
       </ScrollableContent>
     </Box>

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorOutputsTab.tsx

@@ -28,24 +28,31 @@ const selector = createMemoizedSelector(stateSelector, ({ nodes }) => {
   const nes =
     nodes.nodeExecutionStates[lastSelectedNodeId ?? '__UNKNOWN_NODE__'];
 
+  if (
+    !isInvocationNode(lastSelectedNode) ||
+    !nes ||
+    !lastSelectedNodeTemplate
+  ) {
+    return;
+  }
+
   return {
-    node: lastSelectedNode,
+    outputs: nes.outputs,
-    template: lastSelectedNodeTemplate,
+    outputType: lastSelectedNodeTemplate.outputType,
-    nes,
   };
 });
 
 const InspectorOutputsTab = () => {
-  const { node, template, nes } = useAppSelector(selector);
+  const data = useAppSelector(selector);
   const { t } = useTranslation();
 
-  if (!node || !nes || !isInvocationNode(node)) {
+  if (!data) {
     return (
       <IAINoContentFallback label={t('nodes.noNodeSelected')} icon={null} />
     );
   }
 
-  if (nes.outputs.length === 0) {
+  if (data.outputs.length === 0) {
     return (
       <IAINoContentFallback label={t('nodes.noOutputRecorded')} icon={null} />
     );
@@ -63,15 +70,15 @@ const InspectorOutputsTab = () => {
           h="full"
           w="full"
         >
-          {template?.outputType === 'image_output' ? (
+          {data.outputType === 'image_output' ? (
-            nes.outputs.map((result, i) => (
+            data.outputs.map((result, i) => (
               <ImageOutputPreview
                 key={getKey(result, i)}
                 output={result as ImageOutput}
               />
             ))
           ) : (
-            <DataViewer data={nes.outputs} label={t('nodes.nodeOutputs')} />
+            <DataViewer data={data.outputs} label={t('nodes.nodeOutputs')} />
           )}
         </Flex>
       </ScrollableContent>

invokeai/frontend/web/src/features/nodes/hooks/useNodeNeedsUpdate.ts

@@ -11,20 +11,15 @@ export const useNodeNeedsUpdate = (nodeId: string) => {
       createMemoizedSelector(stateSelector, ({ nodes }) => {
         const node = nodes.nodes.find((node) => node.id === nodeId);
         const template = nodes.nodeTemplates[node?.data.type ?? ''];
-        return { node, template };
+        if (isInvocationNode(node) && template) {
+          return getNeedsUpdate(node, template);
+        }
+        return false;
       }),
     [nodeId]
   );
 
-  const { node, template } = useAppSelector(selector);
+  const needsUpdate = useAppSelector(selector);
-
-  const needsUpdate = useMemo(
-    () =>
-      isInvocationNode(node) && template
-        ? getNeedsUpdate(node, template)
-        : false,
-    [node, template]
-  );
 
   return needsUpdate;
 };

invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx

@@ -16,7 +16,7 @@ import {
   InvModalOverlay,
 } from 'common/components/InvModal/wrapper';
 import type { ReactElement } from 'react';
-import { cloneElement, memo } from 'react';
+import { cloneElement, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HotkeysModalItem from './HotkeysModalItem';
@@ -32,6 +32,21 @@ type HotkeyList = {
   hotkey: string;
 };
 
+const renderHotkeyModalItems = (hotkeys: HotkeyList[]) => (
+  <Flex flexDir="column" gap={4}>
+    {hotkeys.map((hotkey, i) => (
+      <Flex flexDir="column" px={2} gap={4} key={i}>
+        <HotkeysModalItem
+          title={hotkey.title}
+          description={hotkey.desc}
+          hotkey={hotkey.hotkey}
+        />
+        {i < hotkeys.length - 1 && <Divider />}
+      </Flex>
+    ))}
+  </Flex>
+);
+
 const HotkeysModal = ({ children }: HotkeysModalProps) => {
   const {
     isOpen: isHotkeyModalOpen,
@@ -41,7 +56,8 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
 
   const { t } = useTranslation();
 
-  const appHotkeys = [
+  const appHotkeys = useMemo(
+    () => [
       {
         title: t('hotkeys.invoke.title'),
         desc: t('hotkeys.invoke.desc'),
@@ -77,9 +93,12 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
         desc: t('hotkeys.changeTabs.desc'),
         hotkey: '1-5',
       },
-  ];
+    ],
+    [t]
+  );
 
-  const generalHotkeys = [
+  const generalHotkeys = useMemo(
+    () => [
       {
         title: t('hotkeys.setPrompt.title'),
         desc: t('hotkeys.setPrompt.desc'),
@@ -120,9 +139,12 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
         desc: t('hotkeys.closePanels.desc'),
         hotkey: 'Esc',
       },
-  ];
+    ],
+    [t]
+  );
 
-  const galleryHotkeys = [
+  const galleryHotkeys = useMemo(
+    () => [
       {
         title: t('hotkeys.previousImage.title'),
         desc: t('hotkeys.previousImage.desc'),
@@ -143,9 +165,12 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
         desc: t('hotkeys.decreaseGalleryThumbSize.desc'),
         hotkey: 'Shift+Down',
       },
-  ];
+    ],
+    [t]
+  );
 
-  const unifiedCanvasHotkeys = [
+  const unifiedCanvasHotkeys = useMemo(
+    () => [
       {
         title: t('hotkeys.selectBrush.title'),
         desc: t('hotkeys.selectBrush.desc'),
@@ -276,29 +301,19 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
         desc: t('hotkeys.acceptStagingImage.desc'),
         hotkey: 'Enter',
       },
-  ];
+    ],
+    [t]
+  );
 
-  const nodesHotkeys = [
+  const nodesHotkeys = useMemo(
+    () => [
       {
         title: t('hotkeys.addNodes.title'),
         desc: t('hotkeys.addNodes.desc'),
         hotkey: 'Shift + A / Space',
       },
-  ];
+    ],
-
+    [t]
-  const renderHotkeyModalItems = (hotkeys: HotkeyList[]) => (
-    <Flex flexDir="column" gap={4}>
-      {hotkeys.map((hotkey, i) => (
-        <Flex flexDir="column" px={2} gap={4} key={i}>
-          <HotkeysModalItem
-            title={hotkey.title}
-            description={hotkey.desc}
-            hotkey={hotkey.hotkey}
-          />
-          {i < hotkeys.length - 1 && <Divider />}
-        </Flex>
-      ))}
-    </Flex>
   );
 
   return (