feat(ui): more memoization

invokeai/frontend/web/src/common/components/InvEditable/theme.ts

@@ -13,7 +13,7 @@ const baseStylePreview = defineStyle({
   py: '1',
   transitionProperty: 'common',
   transitionDuration: 'normal',
-  color: 'base.100'
+  color: 'base.100',
 });
 
 const baseStyleInput = defineStyle(() => ({

invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx

@@ -175,7 +175,7 @@ const IAICanvas = () => {
     [stageCursor]
   );
 
-  const scale= useMemo(()=>({x: stageScale, y: stageScale}),[stageScale])
+  const scale = useMemo(() => ({ x: stageScale, y: stageScale }), [stageScale]);
 
   return (
     <Flex

invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx

@@ -7,7 +7,7 @@ import { Group, Rect } from 'react-konva';
 
 import IAICanvasImage from './IAICanvasImage';
 
-const dash = [4, 4]
+const dash = [4, 4];
 
 const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
   const {

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

@@ -3,6 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 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(
@@ -22,7 +23,7 @@ const cursorPositionSelector = createMemoizedSelector(
   }
 );
 
-export default function IAICanvasStatusTextCursorPos() {
+const IAICanvasStatusTextCursorPos = () => {
   const { cursorCoordinatesString } = useAppSelector(cursorPositionSelector);
   const { t } = useTranslation();
 
@@ -31,4 +32,6 @@ export default function IAICanvasStatusTextCursorPos() {
       'unifiedCanvas.cursorPosition'
     )}: ${cursorCoordinatesString}`}</Box>
   );
-}
+};
+
+export default memo(IAICanvasStatusTextCursorPos);

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -314,4 +314,4 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
 
 export default memo(IAICanvasBoundingBox);
 
-const emptyArray: string[] = []
+const emptyArray: string[] = [];

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { redo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaRedo } from 'react-icons/fa';
@@ -21,7 +21,7 @@ const canvasRedoSelector = createMemoizedSelector(
   }
 );
 
-export default function IAICanvasRedoButton() {
+const IAICanvasRedoButton = () => {
   const dispatch = useAppDispatch();
   const { canRedo, activeTabName } = useAppSelector(canvasRedoSelector);
 
@@ -52,4 +52,6 @@ export default function IAICanvasRedoButton() {
       isDisabled={!canRedo}
     />
   );
-}
+};
+
+export default memo(IAICanvasRedoButton);

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
 import { undo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaUndo } from 'react-icons/fa';
@@ -21,7 +21,7 @@ const canvasUndoSelector = createMemoizedSelector(
   }
 );
 
-export default function IAICanvasUndoButton() {
+const IAICanvasUndoButton = () => {
   const dispatch = useAppDispatch();
 
   const { t } = useTranslation();
@@ -53,4 +53,6 @@ export default function IAICanvasUndoButton() {
       isDisabled={!canUndo}
     />
   );
-}
+};
+
+export default memo(IAICanvasUndoButton);

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx

@@ -6,14 +6,14 @@ import { useControlAdapterControlMode } from 'features/controlAdapters/hooks/use
 import { useControlAdapterIsEnabled } from 'features/controlAdapters/hooks/useControlAdapterIsEnabled';
 import { controlAdapterControlModeChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
 import type { ControlMode } from 'features/controlAdapters/store/types';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
   id: string;
 };
 
-export default function ParamControlAdapterControlMode({ id }: Props) {
+const ParamControlAdapterControlMode = ({ id }: Props) => {
   const isEnabled = useControlAdapterIsEnabled(id);
   const controlMode = useControlAdapterControlMode(id);
   const dispatch = useAppDispatch();
@@ -66,4 +66,6 @@ export default function ParamControlAdapterControlMode({ id }: Props) {
       />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamControlAdapterControlMode);

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx

@@ -7,14 +7,14 @@ import { useControlAdapterResizeMode } from 'features/controlAdapters/hooks/useC
 import { controlAdapterResizeModeChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
 import type { ResizeMode } from 'features/controlAdapters/store/types';
 import { isResizeMode } from 'features/controlAdapters/store/types';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
   id: string;
 };
 
-export default function ParamControlAdapterResizeMode({ id }: Props) {
+const ParamControlAdapterResizeMode = ({ id }: Props) => {
   const isEnabled = useControlAdapterIsEnabled(id);
   const resizeMode = useControlAdapterResizeMode(id);
   const dispatch = useAppDispatch();
@@ -67,4 +67,6 @@ export default function ParamControlAdapterResizeMode({ id }: Props) {
       />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamControlAdapterResizeMode);

invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx

@@ -1,12 +1,15 @@
 import { Flex } from '@chakra-ui/react';
 import type { PropsWithChildren } from 'react';
+import { memo } from 'react';
 
 type Props = PropsWithChildren;
 
-export default function ProcessorWrapper(props: Props) {
+const ProcessorWrapper = (props: Props) => {
   return (
     <Flex flexDir="column" gap={4}>
       {props.children}
     </Flex>
   );
-}
+};
+
+export default memo(ProcessorWrapper);

invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx

@@ -5,10 +5,10 @@ import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { setHrfEnabled } from 'features/hrf/store/hrfSlice';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function ParamHrfToggle() {
+const ParamHrfToggle = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -21,14 +21,12 @@ export default function ParamHrfToggle() {
   );
 
   return (
-    <InvControl
+    <InvControl label={t('hrf.enableHrf')} labelProps={labelProps} w="full">
-      label={t('hrf.enableHrf')}
-      labelProps={labelProps}
-      w="full"
-    >
       <InvSwitch isChecked={hrfEnabled} onChange={handleHrfEnabled} />
     </InvControl>
   );
-}
+};
 
 const labelProps: InvLabelProps = { flexGrow: 1 };
+
+export default memo(ParamHrfToggle);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx

@@ -1,13 +1,13 @@
 import { Flex } from '@chakra-ui/react';
 import { InvButton } from 'common/components/InvButton/InvButton';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AdvancedAddModels from './AdvancedAddModels';
 import SimpleAddModels from './SimpleAddModels';
 
-export default function AddModels() {
+const AddModels = () => {
   const { t } = useTranslation();
   const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>(
     'simple'
@@ -47,4 +47,6 @@ export default function AddModels() {
       </Flex>
     </Flex>
   );
-}
+};
+
+export default memo(AddModels);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx

@@ -12,7 +12,7 @@ import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVari
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import type { CSSProperties, FocusEventHandler } from 'react';
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAddMainModelsMutation } from 'services/api/endpoints/models';
 import type { CheckpointModelConfig } from 'services/api/types';
@@ -23,9 +23,7 @@ type AdvancedAddCheckpointProps = {
   model_path?: string;
 };
 
-export default function AdvancedAddCheckpoint(
+const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => {
-  props: AdvancedAddCheckpointProps
-) {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { model_path } = props;
@@ -173,8 +171,10 @@ export default function AdvancedAddCheckpoint(
       </Flex>
     </form>
   );
-}
+};
 
 const formStyles: CSSProperties = {
   width: '100%',
 };
+
+export default memo(AdvancedAddCheckpoint);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx

@@ -10,7 +10,7 @@ import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVari
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import type { CSSProperties, FocusEventHandler } from 'react';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAddMainModelsMutation } from 'services/api/endpoints/models';
 import type { DiffusersModelConfig } from 'services/api/types';
@@ -21,7 +21,7 @@ type AdvancedAddDiffusersProps = {
   model_path?: string;
 };
 
-export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
+const AdvancedAddDiffusers = (props: AdvancedAddDiffusersProps) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { model_path } = props;
@@ -137,8 +137,10 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) {
       </Flex>
     </form>
   );
-}
+};
 
 const formStyles: CSSProperties = {
   width: '100%',
 };
+
+export default memo(AdvancedAddDiffusers);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx

@@ -5,7 +5,7 @@ import type {
   InvSelectOnChange,
   InvSelectOption,
 } from 'common/components/InvSelect/types';
-import { useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 
@@ -17,7 +17,7 @@ export type ManualAddMode = z.infer<typeof zManualAddMode>;
 export const isManualAddMode = (v: unknown): v is ManualAddMode =>
   zManualAddMode.safeParse(v).success;
 
-export default function AdvancedAddModels() {
+const AdvancedAddModels = () => {
   const [advancedAddMode, setAdvancedAddMode] =
     useState<ManualAddMode>('diffusers');
 
@@ -54,4 +54,6 @@ export default function AdvancedAddModels() {
       </Flex>
     </Flex>
   );
-}
+};
+
+export default memo(AdvancedAddModels);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx

@@ -11,7 +11,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { difference, forEach, intersection, map, values } from 'lodash-es';
 import type { ChangeEvent, MouseEvent } from 'react';
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ALL_BASE_MODELS } from 'services/api/constants';
 import type { SearchFolderResponse } from 'services/api/endpoints/models';
@@ -21,7 +21,7 @@ import {
   useImportMainModelsMutation,
 } from 'services/api/endpoints/models';
 
-export default function FoundModelsList() {
+const FoundModelsList = () => {
   const searchFolder = useAppSelector(
     (state: RootState) => state.modelmanager.searchFolder
   );
@@ -203,7 +203,7 @@ export default function FoundModelsList() {
   };
 
   return renderFoundModels();
-}
+};
 
 const foundModelsFilter = (
   data: SearchFolderResponse | undefined,
@@ -221,3 +221,5 @@ const foundModelsFilter = (
   });
   return filteredModels;
 };
+
+export default memo(FoundModelsList);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx

@@ -10,7 +10,7 @@ import type {
 } from 'common/components/InvSelect/types';
 import { InvText } from 'common/components/InvText/wrapper';
 import { setAdvancedAddScanModel } from 'features/modelManager/store/modelManagerSlice';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaTimes } from 'react-icons/fa';
 
@@ -19,7 +19,7 @@ import AdvancedAddDiffusers from './AdvancedAddDiffusers';
 import type { ManualAddMode } from './AdvancedAddModels';
 import { isManualAddMode } from './AdvancedAddModels';
 
-export default function ScanAdvancedAddModels() {
+const ScanAdvancedAddModels = () => {
   const advancedAddScanModel = useAppSelector(
     (state: RootState) => state.modelmanager.advancedAddScanModel
   );
@@ -121,4 +121,6 @@ export default function ScanAdvancedAddModels() {
       )}
     </Box>
   );
-}
+};
+
+export default memo(ScanAdvancedAddModels);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx

@@ -1,10 +1,11 @@
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
 
 import FoundModelsList from './FoundModelsList';
 import ScanAdvancedAddModels from './ScanAdvancedAddModels';
 import SearchFolderForm from './SearchFolderForm';
 
-export default function ScanModels() {
+const ScanModels = () => {
   return (
     <Flex flexDirection="column" w="100%" gap={4}>
       <SearchFolderForm />
@@ -21,4 +22,6 @@ export default function ScanModels() {
       </Flex>
     </Flex>
   );
-}
+};
+
+export default memo(ScanModels);

invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx

@@ -9,6 +9,7 @@ import type { InvSelectOption } from 'common/components/InvSelect/types';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import type { CSSProperties } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useImportMainModelsMutation } from 'services/api/endpoints/models';
 
@@ -24,7 +25,7 @@ type ExtendedImportModelConfig = {
   prediction_type?: 'v_prediction' | 'epsilon' | 'sample' | 'none' | undefined;
 };
 
-export default function SimpleAddModels() {
+const SimpleAddModels = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
@@ -97,8 +98,10 @@ export default function SimpleAddModels() {
       </Flex>
     </form>
   );
-}
+};
 
 const formStyles: CSSProperties = {
   width: '100%',
 };
+
+export default memo(SimpleAddModels);

invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx

@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/react';
 import { InvButton } from 'common/components/InvButton/InvButton';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import AddModels from './AddModelsPanel/AddModels';
@@ -9,7 +9,7 @@ import ScanModels from './AddModelsPanel/ScanModels';
 
 type AddModelTabs = 'add' | 'scan';
 
-export default function ImportModelsPanel() {
+const ImportModelsPanel = () => {
   const [addModelTab, setAddModelTab] = useState<AddModelTabs>('add');
   const { t } = useTranslation();
 
@@ -41,4 +41,6 @@ export default function ImportModelsPanel() {
       {addModelTab == 'scan' && <ScanModels />}
     </Flex>
   );
-}
+};
+
+export default memo(ImportModelsPanel);

invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx

@@ -16,7 +16,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import { pickBy } from 'lodash-es';
 import type { ChangeEvent } from 'react';
-import { useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ALL_BASE_MODELS } from 'services/api/constants';
 import {
@@ -36,7 +36,7 @@ type MergeInterpolationMethods =
   | 'inv_sigmoid'
   | 'add_difference';
 
-export default function MergeModelsPanel() {
+const MergeModelsPanel = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
@@ -422,4 +422,6 @@ export default function MergeModelsPanel() {
       </InvButton>
     </Flex>
   );
-}
+};
+
+export default memo(MergeModelsPanel);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { InvText } from 'common/components/InvText/wrapper';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ALL_BASE_MODELS } from 'services/api/constants';
 import type {
@@ -18,7 +18,7 @@ import DiffusersModelEdit from './ModelManagerPanel/DiffusersModelEdit';
 import LoRAModelEdit from './ModelManagerPanel/LoRAModelEdit';
 import ModelList from './ModelManagerPanel/ModelList';
 
-export default function ModelManagerPanel() {
+const ModelManagerPanel = () => {
   const [selectedModelId, setSelectedModelId] = useState<string>();
   const { mainModel } = useGetMainModelsQuery(ALL_BASE_MODELS, {
     selectFromResult: ({ data }) => ({
@@ -42,7 +42,7 @@ export default function ModelManagerPanel() {
       <ModelEdit model={model} />
     </Flex>
   );
-}
+};
 
 type ModelEditProps = {
   model: MainModelConfigEntity | LoRAModelConfigEntity | undefined;
@@ -82,3 +82,5 @@ const ModelEdit = (props: ModelEditProps) => {
     </Flex>
   );
 };
+
+export default memo(ModelManagerPanel);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx

@@ -12,7 +12,7 @@ import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVari
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
-import { useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { CheckpointModelConfigEntity } from 'services/api/endpoints/models';
 import {
@@ -27,7 +27,7 @@ type CheckpointModelEditProps = {
   model: CheckpointModelConfigEntity;
 };
 
-export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
+const CheckpointModelEdit = (props: CheckpointModelEditProps) => {
   const { model } = props;
 
   const [updateMainModel, { isLoading }] = useUpdateMainModelsMutation();
@@ -189,4 +189,6 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) {
       </Flex>
     </Flex>
   );
-}
+};
+
+export default memo(CheckpointModelEdit);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx

@@ -10,7 +10,7 @@ import ModelVariantSelect from 'features/modelManager/subpanels/shared/ModelVari
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { DiffusersModelConfigEntity } from 'services/api/endpoints/models';
 import { useUpdateMainModelsMutation } from 'services/api/endpoints/models';
@@ -20,7 +20,7 @@ type DiffusersModelEditProps = {
   model: DiffusersModelConfigEntity;
 };
 
-export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
+const DiffusersModelEdit = (props: DiffusersModelEditProps) => {
   const { model } = props;
 
   const [updateMainModel, { isLoading }] = useUpdateMainModelsMutation();
@@ -133,4 +133,6 @@ export default function DiffusersModelEdit(props: DiffusersModelEditProps) {
       </form>
     </Flex>
   );
-}
+};
+
+export default memo(DiffusersModelEdit);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx

@@ -12,7 +12,7 @@ import {
 } from 'features/parameters/types/constants';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
 import { useUpdateLoRAModelsMutation } from 'services/api/endpoints/models';
@@ -22,7 +22,7 @@ type LoRAModelEditProps = {
   model: LoRAModelConfigEntity;
 };
 
-export default function LoRAModelEdit(props: LoRAModelEditProps) {
+const LoRAModelEdit = (props: LoRAModelEditProps) => {
   const { model } = props;
 
   const [updateLoRAModel, { isLoading }] = useUpdateLoRAModelsMutation();
@@ -124,4 +124,6 @@ export default function LoRAModelEdit(props: LoRAModelEditProps) {
       </form>
     </Flex>
   );
-}
+};
+
+export default memo(LoRAModelEdit);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx

@@ -16,7 +16,7 @@ import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
 import type { ChangeEvent } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useConvertMainModelsMutation } from 'services/api/endpoints/models';
 import type { CheckpointModelConfig } from 'services/api/types';
@@ -27,7 +27,7 @@ interface ModelConvertProps {
 
 type SaveLocation = 'InvokeAIRoot' | 'Custom';
 
-export default function ModelConvert(props: ModelConvertProps) {
+const ModelConvert = (props: ModelConvertProps) => {
   const { model } = props;
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
@@ -186,4 +186,6 @@ export default function ModelConvert(props: ModelConvertProps) {
       </InvConfirmationAlertDialog>
     </>
   );
-}
+};
+
+export default memo(ModelConvert);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -9,7 +9,7 @@ import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import { MODEL_TYPE_SHORT_MAP } from 'features/parameters/types/constants';
 import { addToast } from 'features/system/store/systemSlice';
 import { makeToast } from 'features/system/util/makeToast';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import type {
   LoRAModelConfigEntity,
@@ -27,7 +27,7 @@ type ModelListItemProps = {
   setSelectedModelId: (v: string | undefined) => void;
 };
 
-export default function ModelListItem(props: ModelListItemProps) {
+const ModelListItem = (props: ModelListItemProps) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const [deleteMainModel] = useDeleteMainModelsMutation();
@@ -129,4 +129,6 @@ export default function ModelListItem(props: ModelListItemProps) {
       </InvConfirmationAlertDialog>
     </Flex>
   );
-}
+};
+
+export default memo(ModelListItem);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx

@@ -1,11 +1,14 @@
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
 
 import SyncModels from './ModelManagerSettingsPanel/SyncModels';
 
-export default function ModelManagerSettingsPanel() {
+const ModelManagerSettingsPanel = () => {
   return (
     <Flex>
       <SyncModels />
     </Flex>
   );
-}
+};
+
+export default memo(ModelManagerSettingsPanel);

invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx

@@ -1,9 +1,10 @@
 import { Flex } from '@chakra-ui/react';
 import { InvText } from 'common/components/InvText/wrapper';
 import { SyncModelsButton } from 'features/modelManager/components/SyncModels/SyncModelsButton';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function SyncModels() {
+const SyncModels = () => {
   const { t } = useTranslation();
 
   return (
@@ -25,4 +26,6 @@ export default function SyncModels() {
       <SyncModelsButton />
     </Flex>
   );
-}
+};
+
+export default memo(SyncModels);

invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx

@@ -5,6 +5,7 @@ import type {
   InvSelectProps,
 } from 'common/components/InvSelect/types';
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const options: InvSelectOption[] = [
@@ -16,11 +17,13 @@ const options: InvSelectOption[] = [
 
 type BaseModelSelectProps = Omit<InvSelectProps, 'options'>;
 
-export default function BaseModelSelect(props: BaseModelSelectProps) {
+const BaseModelSelect = (props: BaseModelSelectProps) => {
   const { t } = useTranslation();
   return (
     <InvControl label={t('modelManager.baseModel')}>
       <InvSelect options={options} {...props} />
     </InvControl>
   );
-}
+};
+
+export default memo(BaseModelSelect);

invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx

@@ -5,16 +5,14 @@ import type {
   InvSelectOption,
   InvSelectProps,
 } from 'common/components/InvSelect/types';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useGetCheckpointConfigsQuery } from 'services/api/endpoints/models';
 
 type CheckpointConfigSelectProps = Omit<InvSelectProps, 'options'>;
 
 const sx: ChakraProps['sx'] = { w: 'full' };
 
-export default function CheckpointConfigsSelect(
+const CheckpointConfigsSelect = (props: CheckpointConfigSelectProps) => {
-  props: CheckpointConfigSelectProps
-) {
   const { data } = useGetCheckpointConfigsQuery();
   const options = useMemo<InvSelectOption[]>(
     () => (data ? data.map((i) => ({ label: i, value: i })) : []),
@@ -30,4 +28,6 @@ export default function CheckpointConfigsSelect(
       />
     </InvControl>
   );
-}
+};
+
+export default memo(CheckpointConfigsSelect);

invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx

@@ -4,6 +4,7 @@ import type {
   InvSelectOption,
   InvSelectProps,
 } from 'common/components/InvSelect/types';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const options: InvSelectOption[] = [
@@ -14,11 +15,13 @@ const options: InvSelectOption[] = [
 
 type VariantSelectProps = Omit<InvSelectProps, 'options'>;
 
-export default function ModelVariantSelect(props: VariantSelectProps) {
+const ModelVariantSelect = (props: VariantSelectProps) => {
   const { t } = useTranslation();
   return (
     <InvControl label={t('modelManager.variant')}>
       <InvSelect options={options} {...props} />
     </InvControl>
   );
-}
+};
+
+export default memo(ModelVariantSelect);

invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx

@@ -2,10 +2,10 @@ import { Flex } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
 import { nodeOpacityChanged } from 'features/nodes/store/nodesSlice';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function NodeOpacitySlider() {
+const NodeOpacitySlider = () => {
   const dispatch = useAppDispatch();
   const nodeOpacity = useAppSelector((state) => state.nodes.nodeOpacity);
   const { t } = useTranslation();
@@ -32,4 +32,6 @@ export default function NodeOpacitySlider() {
       />
     </Flex>
   );
-}
+};
+
+export default memo(NodeOpacitySlider);

invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx

@@ -4,10 +4,10 @@ import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
 import { setClipSkip } from 'features/parameters/store/generationSlice';
 import { CLIP_SKIP_MAP } from 'features/parameters/types/constants';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function ParamClipSkip() {
+const ParamClipSkip = () => {
   const clipSkip = useAppSelector(
     (state: RootState) => state.generation.clipSkip
   );
@@ -60,4 +60,6 @@ export default function ParamClipSkip() {
       />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamClipSkip);

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx

@@ -3,10 +3,10 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
 import { setMaskBlur } from 'features/parameters/store/generationSlice';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function ParamMaskBlur() {
+const ParamMaskBlur = () => {
   const dispatch = useAppDispatch();
   const maskBlur = useAppSelector(
     (state: RootState) => state.generation.maskBlur
@@ -37,4 +37,6 @@ export default function ParamMaskBlur() {
       />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamMaskBlur);

invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx

@@ -8,7 +8,7 @@ import type {
 } from 'common/components/InvSelect/types';
 import { setMaskBlurMethod } from 'features/parameters/store/generationSlice';
 import { isParameterMaskBlurMethod } from 'features/parameters/types/parameterSchemas';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const options: InvSelectOption[] = [
@@ -16,7 +16,7 @@ const options: InvSelectOption[] = [
   { label: 'Gaussian Blur', value: 'gaussian' },
 ];
 
-export default function ParamMaskBlurMethod() {
+const ParamMaskBlurMethod = () => {
   const maskBlurMethod = useAppSelector(
     (state: RootState) => state.generation.maskBlurMethod
   );
@@ -46,4 +46,6 @@ export default function ParamMaskBlurMethod() {
       <InvSelect value={value} onChange={onChange} options={options} />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamMaskBlurMethod);

invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillOptions.tsx

@@ -1,9 +1,10 @@
 import { useAppSelector } from 'app/store/storeHooks';
+import { memo } from 'react';
 
 import ParamInfillPatchmatchDownscaleSize from './ParamInfillPatchmatchDownscaleSize';
 import ParamInfillTilesize from './ParamInfillTilesize';
 
-export default function ParamInfillOptions() {
+const ParamInfillOptions = () => {
   const infillMethod = useAppSelector((state) => state.generation.infillMethod);
   if (infillMethod === 'tile') {
     return <ParamInfillTilesize />;
@@ -14,4 +15,6 @@ export default function ParamInfillOptions() {
   }
 
   return null;
-}
+};
+
+export default memo(ParamInfillOptions);

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

@@ -49,7 +49,7 @@ export const ParamHeight = memo(() => {
     dispatch(heightChanged(initial));
   }, [dispatch, initial]);
 
-  const marks = useMemo(()=>[min, initial, max], [min, initial, max])
+  const marks = useMemo(() => [min, initial, max], [min, initial, max]);
 
   return (
     <InvControl label={t('parameters.height')}>

invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx

@@ -5,12 +5,12 @@ import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { setShouldFitToWidthHeight } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const labelProps: InvLabelProps = { flexGrow: 1 };
 
-export default function ImageToImageFit() {
+const ImageToImageFit = () => {
   const dispatch = useAppDispatch();
 
   const shouldFitToWidthHeight = useAppSelector(
@@ -38,4 +38,6 @@ export default function ImageToImageFit() {
       />
     </InvControl>
   );
-}
+};
+
+export default memo(ImageToImageFit);

invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryHorizontal.tsx

@@ -3,10 +3,10 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
 import { setHorizontalSymmetrySteps } from 'features/parameters/store/generationSlice';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function ParamSymmetryHorizontal() {
+const ParamSymmetryHorizontal = () => {
   const horizontalSymmetrySteps = useAppSelector(
     (state: RootState) => state.generation.horizontalSymmetrySteps
   );
@@ -41,4 +41,6 @@ export default function ParamSymmetryHorizontal() {
       />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamSymmetryHorizontal);

invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryToggle.tsx

@@ -4,9 +4,9 @@ import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSwitch } from 'common/components/InvSwitch/wrapper';
 import { setShouldUseSymmetry } from 'features/parameters/store/generationSlice';
 import type { ChangeEvent } from 'react';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 
-export default function ParamSymmetryToggle() {
+const ParamSymmetryToggle = () => {
   const shouldUseSymmetry = useAppSelector(
     (state: RootState) => state.generation.shouldUseSymmetry
   );
@@ -24,4 +24,6 @@ export default function ParamSymmetryToggle() {
       <InvSwitch isChecked={shouldUseSymmetry} onChange={handleChange} />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamSymmetryToggle);

invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryVertical.tsx

@@ -3,10 +3,10 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControl } from 'common/components/InvControl/InvControl';
 import { InvSlider } from 'common/components/InvSlider/InvSlider';
 import { setVerticalSymmetrySteps } from 'features/parameters/store/generationSlice';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export default function ParamSymmetryVertical() {
+const ParamSymmetryVertical = () => {
   const verticalSymmetrySteps = useAppSelector(
     (state: RootState) => state.generation.verticalSymmetrySteps
   );
@@ -41,4 +41,6 @@ export default function ParamSymmetryVertical() {
       />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamSymmetryVertical);

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx

@@ -11,7 +11,7 @@ import {
   esrganModelNameChanged,
   isParamESRGANModelName,
 } from 'features/parameters/store/postprocessingSlice';
-import { useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const options: GroupBase<InvSelectOption>[] = [
@@ -48,7 +48,7 @@ const options: GroupBase<InvSelectOption>[] = [
   },
 ];
 
-export default function ParamESRGANModel() {
+const ParamESRGANModel = () => {
   const { t } = useTranslation();
 
   const esrganModelName = useAppSelector(
@@ -80,4 +80,6 @@ export default function ParamESRGANModel() {
       <InvSelect value={value} onChange={onChange} options={options} />
     </InvControl>
   );
-}
+};
+
+export default memo(ParamESRGANModel);

invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx

@@ -63,7 +63,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
     [item.status]
   );
 
-  const icon = useMemo(() => (<FaTimes />), []);
+  const icon = useMemo(() => <FaTimes />, []);
   return (
     <Flex
       flexDir="column"

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 } from 'react';
+import { cloneElement, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HotkeysModalItem from './HotkeysModalItem';
@@ -32,7 +32,7 @@ type HotkeyList = {
   hotkey: string;
 };
 
-export default function HotkeysModal({ children }: HotkeysModalProps) {
+const HotkeysModal = ({ children }: HotkeysModalProps) => {
   const {
     isOpen: isHotkeyModalOpen,
     onOpen: onHotkeysModalOpen,
@@ -401,4 +401,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) {
       </InvModal>
     </>
   );
-}
+};
+
+export default memo(HotkeysModal);

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

@@ -1,5 +1,6 @@
 import { Box, Grid } from '@chakra-ui/react';
 import { InvText } from 'common/components/InvText/wrapper';
+import { memo } from 'react';
 
 interface HotkeysModalProps {
   hotkey: string;
@@ -7,7 +8,7 @@ interface HotkeysModalProps {
   description?: string;
 }
 
-export default function HotkeysModalItem(props: HotkeysModalProps) {
+const HotkeysModalItem = (props: HotkeysModalProps) => {
   const { title, hotkey, description } = props;
   return (
     <Grid
@@ -24,4 +25,6 @@ export default function HotkeysModalItem(props: HotkeysModalProps) {
       </Box>
     </Grid>
   );
-}
+};
+
+export default memo(HotkeysModalItem);

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsClearIntermediates.tsx

@@ -5,7 +5,7 @@ import { InvText } from 'common/components/InvText/wrapper';
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { addToast } from 'features/system/store/systemSlice';
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   useClearIntermediatesMutation,
@@ -15,7 +15,7 @@ import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 
 import StyledFlex from './StyledFlex';
 
-export default function SettingsClearIntermediates() {
+const SettingsClearIntermediates = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
@@ -88,4 +88,6 @@ export default function SettingsClearIntermediates() {
       </InvText>
     </StyledFlex>
   );
-}
+};
+
+export default memo(SettingsClearIntermediates);

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -98,7 +98,7 @@ const enabledTabsSelector = createMemoizedSelector(
 export const NO_GALLERY_TABS: InvokeTabName[] = ['modelManager', 'queue'];
 export const NO_SIDE_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue'];
 const panelStyles: CSSProperties = { height: '100%', width: '100%' };
-const GALLERY_MIN_SIZE_PCT = 20
+const GALLERY_MIN_SIZE_PCT = 20;
 
 const InvokeTabs = () => {
   const activeTabIndex = useAppSelector(activeTabIndexSelector);