From 2d96c62fdb316f1a05966fdd0c5ed2343ec539d1 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 29 Dec 2023 18:37:14 +1100 Subject: [PATCH] feat(ui): more memoization --- .../src/common/components/InvEditable/theme.ts | 2 +- .../src/features/canvas/components/IAICanvas.tsx | 2 +- .../canvas/components/IAICanvasStagingArea.tsx | 2 +- .../IAICanvasStatusTextCursorPos.tsx | 7 +++++-- .../IAICanvasToolbar/IAICanvasBoundingBox.tsx | 2 +- .../IAICanvasToolbar/IAICanvasRedoButton.tsx | 8 +++++--- .../IAICanvasToolbar/IAICanvasUndoButton.tsx | 8 +++++--- .../ParamControlAdapterControlMode.tsx | 8 +++++--- .../parameters/ParamControlAdapterResizeMode.tsx | 8 +++++--- .../components/processors/MlsdImageProcessor.tsx | 2 +- .../processors/common/ProcessorWrapper.tsx | 7 +++++-- .../features/hrf/components/ParamHrfToggle.tsx | 16 +++++++--------- .../subpanels/AddModelsPanel/AddModels.tsx | 8 +++++--- .../AddModelsPanel/AdvancedAddCheckpoint.tsx | 10 +++++----- .../AddModelsPanel/AdvancedAddDiffusers.tsx | 8 +++++--- .../AddModelsPanel/AdvancedAddModels.tsx | 8 +++++--- .../subpanels/AddModelsPanel/FoundModelsList.tsx | 8 +++++--- .../AddModelsPanel/ScanAdvancedAddModels.tsx | 8 +++++--- .../subpanels/AddModelsPanel/ScanModels.tsx | 7 +++++-- .../subpanels/AddModelsPanel/SimpleAddModels.tsx | 7 +++++-- .../modelManager/subpanels/ImportModelsPanel.tsx | 8 +++++--- .../modelManager/subpanels/MergeModelsPanel.tsx | 8 +++++--- .../modelManager/subpanels/ModelManagerPanel.tsx | 8 +++++--- .../ModelManagerPanel/CheckpointModelEdit.tsx | 8 +++++--- .../ModelManagerPanel/DiffusersModelEdit.tsx | 8 +++++--- .../ModelManagerPanel/LoRAModelEdit.tsx | 8 +++++--- .../subpanels/ModelManagerPanel/ModelConvert.tsx | 8 +++++--- .../ModelManagerPanel/ModelListItem.tsx | 8 +++++--- .../subpanels/ModelManagerSettingsPanel.tsx | 7 +++++-- .../ModelManagerSettingsPanel/SyncModels.tsx | 7 +++++-- .../subpanels/shared/BaseModelSelect.tsx | 7 +++++-- .../subpanels/shared/CheckpointConfigsSelect.tsx | 10 +++++----- .../subpanels/shared/ModelVariantSelect.tsx | 7 +++++-- .../panels/BottomLeftPanel/NodeOpacitySlider.tsx | 8 +++++--- .../components/Advanced/ParamClipSkip.tsx | 8 +++++--- .../Compositing/MaskAdjustment/ParamMaskBlur.tsx | 8 +++++--- .../MaskAdjustment/ParamMaskBlurMethod.tsx | 8 +++++--- .../InfillAndScaling/ParamInfillOptions.tsx | 7 +++++-- .../parameters/components/Core/ParamHeight.tsx | 2 +- .../components/ImageToImage/ImageToImageFit.tsx | 8 +++++--- .../Symmetry/ParamSymmetryHorizontal.tsx | 8 +++++--- .../components/Symmetry/ParamSymmetryToggle.tsx | 8 +++++--- .../Symmetry/ParamSymmetryVertical.tsx | 8 +++++--- .../components/Upscale/ParamRealESRGANModel.tsx | 8 +++++--- .../components/QueueList/QueueItemComponent.tsx | 2 +- .../components/HotkeysModal/HotkeysModal.tsx | 8 +++++--- .../components/HotkeysModal/HotkeysModalItem.tsx | 7 +++++-- .../SettingsModal/SettingsClearIntermediates.tsx | 8 +++++--- .../src/features/ui/components/InvokeTabs.tsx | 2 +- 49 files changed, 215 insertions(+), 131 deletions(-) diff --git a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts b/invokeai/frontend/web/src/common/components/InvEditable/theme.ts index 406f6a95a9..241b939332 100644 --- a/invokeai/frontend/web/src/common/components/InvEditable/theme.ts +++ b/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(() => ({ diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx index f21c18aee9..a15368ce34 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx +++ b/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 ( { const { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx index b3e89fb275..4e2a984d65 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx +++ b/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}`} ); -} +}; + +export default memo(IAICanvasStatusTextCursorPos); diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx index f969d227fe..42bca1c23f 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx +++ b/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[] = [] \ No newline at end of file +const emptyArray: string[] = []; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx index 87c0ca57e2..1c3c375d6a 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx +++ b/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); diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx index 2ac28a259a..ccbda4e053 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx +++ b/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); diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx index 2ca1b3630b..2beed28fb4 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterControlMode.tsx +++ b/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) { /> ); -} +}; + +export default memo(ParamControlAdapterControlMode); diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx index 3bc1a8dd3f..b88a2d2193 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterResizeMode.tsx +++ b/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) { /> ); -} +}; + +export default memo(ParamControlAdapterResizeMode); diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx index 1aca1fd37d..3b93ffdc9e 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx +++ b/invokeai/frontend/web/src/features/controlAdapters/components/processors/MlsdImageProcessor.tsx @@ -132,4 +132,4 @@ const MlsdImageProcessor = (props: Props) => { export default memo(MlsdImageProcessor); const marks0to4096 = [0, 4096]; -const marks0to1 = [0, 1]; \ No newline at end of file +const marks0to1 = [0, 1]; diff --git a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx b/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx index acb364ae91..dbd6f7830f 100644 --- a/invokeai/frontend/web/src/features/controlAdapters/components/processors/common/ProcessorWrapper.tsx +++ b/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 ( {props.children} ); -} +}; + +export default memo(ProcessorWrapper); diff --git a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx b/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx index 0491d6323a..82a67b49bb 100644 --- a/invokeai/frontend/web/src/features/hrf/components/ParamHrfToggle.tsx +++ b/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 ( - + ); -} +}; -const labelProps: InvLabelProps = { flexGrow: 1 }; \ No newline at end of file +const labelProps: InvLabelProps = { flexGrow: 1 }; + +export default memo(ParamHrfToggle); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx index 8746bc4dac..7fe19312cc 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx +++ b/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() { ); -} +}; + +export default memo(AddModels); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx index 6d8b15aaae..c199c7fb1c 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx +++ b/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( - props: AdvancedAddCheckpointProps -) { +const AdvancedAddCheckpoint = (props: AdvancedAddCheckpointProps) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const { model_path } = props; @@ -173,8 +171,10 @@ export default function AdvancedAddCheckpoint( ); -} +}; const formStyles: CSSProperties = { width: '100%', }; + +export default memo(AdvancedAddCheckpoint); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx index 561938587a..e7d23b81c5 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx +++ b/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) { ); -} +}; const formStyles: CSSProperties = { width: '100%', }; + +export default memo(AdvancedAddDiffusers); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx index cd98f8e11e..f9a63e498f 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AdvancedAddModels.tsx +++ b/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; export const isManualAddMode = (v: unknown): v is ManualAddMode => zManualAddMode.safeParse(v).success; -export default function AdvancedAddModels() { +const AdvancedAddModels = () => { const [advancedAddMode, setAdvancedAddMode] = useState('diffusers'); @@ -54,4 +54,6 @@ export default function AdvancedAddModels() { ); -} +}; + +export default memo(AdvancedAddModels); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx index d8c9adc6e7..3b326724c6 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/FoundModelsList.tsx +++ b/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); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx index d767655e6b..3b9bc2c985 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx +++ b/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() { )} ); -} +}; + +export default memo(ScanAdvancedAddModels); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx index 9886cdaeb4..c492b74be3 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/ScanModels.tsx +++ b/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 ( @@ -21,4 +22,6 @@ export default function ScanModels() { ); -} +}; + +export default memo(ScanModels); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx index fc9d2630da..df23d1c4e2 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/SimpleAddModels.tsx +++ b/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() { ); -} +}; const formStyles: CSSProperties = { width: '100%', }; + +export default memo(SimpleAddModels); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx index 2b46a14fdf..ed6b421565 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ImportModelsPanel.tsx +++ b/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('add'); const { t } = useTranslation(); @@ -41,4 +41,6 @@ export default function ImportModelsPanel() { {addModelTab == 'scan' && } ); -} +}; + +export default memo(ImportModelsPanel); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx index cbfed933e6..7418f2bc22 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/MergeModelsPanel.tsx +++ b/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() { ); -} +}; + +export default memo(MergeModelsPanel); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx index 91ad0ec0fe..974af0076f 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel.tsx +++ b/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(); const { mainModel } = useGetMainModelsQuery(ALL_BASE_MODELS, { selectFromResult: ({ data }) => ({ @@ -42,7 +42,7 @@ export default function ModelManagerPanel() { ); -} +}; type ModelEditProps = { model: MainModelConfigEntity | LoRAModelConfigEntity | undefined; @@ -82,3 +82,5 @@ const ModelEdit = (props: ModelEditProps) => { ); }; + +export default memo(ModelManagerPanel); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index f01a19fc17..e105fd68f2 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/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) { ); -} +}; + +export default memo(CheckpointModelEdit); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx index cf8d13f2af..7545fcb315 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/DiffusersModelEdit.tsx +++ b/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) { ); -} +}; + +export default memo(DiffusersModelEdit); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx index 25269c1434..1c7698769e 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/LoRAModelEdit.tsx +++ b/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) { ); -} +}; + +export default memo(LoRAModelEdit); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx index 4083aedda0..1b4c347969 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelConvert.tsx +++ b/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) { ); -} +}; + +export default memo(ModelConvert); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx index 84d401279d..d281817bae 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/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) { ); -} +}; + +export default memo(ModelListItem); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx index 2454bc8016..4fdfa93eba 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel.tsx +++ b/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 ( ); -} +}; + +export default memo(ModelManagerSettingsPanel); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx index 494df74d95..608c1a9f70 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/ModelManagerSettingsPanel/SyncModels.tsx +++ b/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() { ); -} +}; + +export default memo(SyncModels); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx index 0fc9f26d7c..ea46cf029e 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/BaseModelSelect.tsx +++ b/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; -export default function BaseModelSelect(props: BaseModelSelectProps) { +const BaseModelSelect = (props: BaseModelSelectProps) => { const { t } = useTranslation(); return ( ); -} +}; + +export default memo(BaseModelSelect); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx index cf3958e244..0dd099b407 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/CheckpointConfigsSelect.tsx +++ b/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; const sx: ChakraProps['sx'] = { w: 'full' }; -export default function CheckpointConfigsSelect( - props: CheckpointConfigSelectProps -) { +const CheckpointConfigsSelect = (props: CheckpointConfigSelectProps) => { const { data } = useGetCheckpointConfigsQuery(); const options = useMemo( () => (data ? data.map((i) => ({ label: i, value: i })) : []), @@ -30,4 +28,6 @@ export default function CheckpointConfigsSelect( /> ); -} +}; + +export default memo(CheckpointConfigsSelect); diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx index 543603c0ea..2207ae427f 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/shared/ModelVariantSelect.tsx +++ b/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; -export default function ModelVariantSelect(props: VariantSelectProps) { +const ModelVariantSelect = (props: VariantSelectProps) => { const { t } = useTranslation(); return ( ); -} +}; + +export default memo(ModelVariantSelect); diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx index e914571421..96b3c26435 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx +++ b/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() { /> ); -} +}; + +export default memo(NodeOpacitySlider); diff --git a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx b/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx index 535eeacd2a..b10bab5da8 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Advanced/ParamClipSkip.tsx +++ b/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() { /> ); -} +}; + +export default memo(ParamClipSkip); diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx index 0042787068..7a4221bbc2 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx +++ b/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() { /> ); -} +}; + +export default memo(ParamMaskBlur); diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx index e5b93e61a3..f6f0244634 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx +++ b/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() { ); -} +}; + +export default memo(ParamMaskBlurMethod); diff --git a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillOptions.tsx b/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillOptions.tsx index 0b66486d05..20a1367631 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Canvas/InfillAndScaling/ParamInfillOptions.tsx +++ b/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 ; @@ -14,4 +15,6 @@ export default function ParamInfillOptions() { } return null; -} +}; + +export default memo(ParamInfillOptions); diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx index 1205e350e5..5b2e1ff771 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamHeight.tsx +++ b/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 ( diff --git a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx b/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx index 083d31779b..8142b33418 100644 --- a/invokeai/frontend/web/src/features/parameters/components/ImageToImage/ImageToImageFit.tsx +++ b/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() { /> ); -} +}; + +export default memo(ImageToImageFit); diff --git a/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryHorizontal.tsx b/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryHorizontal.tsx index afd1e24447..fe749d1649 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryHorizontal.tsx +++ b/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() { /> ); -} +}; + +export default memo(ParamSymmetryHorizontal); diff --git a/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryToggle.tsx index 5f608147a2..f7d452eed4 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryToggle.tsx +++ b/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() { ); -} +}; + +export default memo(ParamSymmetryToggle); diff --git a/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryVertical.tsx b/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryVertical.tsx index c89da08132..55eca6d1f3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Symmetry/ParamSymmetryVertical.tsx +++ b/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() { /> ); -} +}; + +export default memo(ParamSymmetryVertical); diff --git a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx index 27cdbc26bf..58d0a825d6 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Upscale/ParamRealESRGANModel.tsx +++ b/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[] = [ @@ -48,7 +48,7 @@ const options: GroupBase[] = [ }, ]; -export default function ParamESRGANModel() { +const ParamESRGANModel = () => { const { t } = useTranslation(); const esrganModelName = useAppSelector( @@ -80,4 +80,6 @@ export default function ParamESRGANModel() { ); -} +}; + +export default memo(ParamESRGANModel); diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx index 27431834c9..f4ac9b4231 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx +++ b/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(() => (), []); + const icon = useMemo(() => , []); return ( { const { isOpen: isHotkeyModalOpen, onOpen: onHotkeysModalOpen, @@ -401,4 +401,6 @@ export default function HotkeysModal({ children }: HotkeysModalProps) { ); -} +}; + +export default memo(HotkeysModal); diff --git a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModalItem.tsx b/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModalItem.tsx index 06c86cb211..43efe820bd 100644 --- a/invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModalItem.tsx +++ b/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 ( ); -} +}; + +export default memo(HotkeysModalItem); diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsClearIntermediates.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsClearIntermediates.tsx index a9390280b8..b67ccc9099 100644 --- a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsClearIntermediates.tsx +++ b/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() { ); -} +}; + +export default memo(SettingsClearIntermediates); diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index 43f4ba14b9..bc5bf5f716 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/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);