github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-17 09:01:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

perf(ui): optimize all selectors 1

Browse Source 
I learned that the inline selector syntax recreates the selector function on every render:

```ts
const val = useAppSelector((s) => s.slice.val)
```

Not good! Better is to create a selector outside the function and use it. Doing that for all selectors now, most of the way through now. Feels snappier.
This commit is contained in:
psychedelicious
2024-08-27 13:19:14 +10:00
parent 04f78a99ad
commit bac0ce1e69
92 changed files with 561 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
View File

@@ -3,6 +3,7 @@ import { IconButton } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { $isConnected } from 'app/hooks/useSocketIO';
import { useAppSelector } from 'app/store/storeHooks';
import { selectSelectionCount } from 'features/gallery/store/gallerySelectors';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiTrashSimpleBold } from 'react-icons/pi';
@@ -15,7 +16,7 @@ export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
const { onClick, isDisabled } = props;
const { t } = useTranslation();
const isConnected = useStore($isConnected);
const imageSelectionLength: number = useAppSelector((s) => s.gallery.selection.length);
const imageSelectionLength = useAppSelector(selectSelectionCount);
const labelMessage: string = `${t('gallery.deleteImage', { count: imageSelectionLength })} (Del)`;
return (

13
invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
View File

@@ -1,4 +1,5 @@
import { ConfirmationAlertDialog, Divider, Flex, FormControl, FormLabel, Switch, Text } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
@@ -11,7 +12,7 @@ import {
} from 'features/deleteImageModal/store/slice';
import type { ImageUsage } from 'features/deleteImageModal/store/types';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
import { selectSystemSlice, setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
import { some } from 'lodash-es';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
@@ -41,11 +42,17 @@ const selectImageUsages = createMemoizedSelector(
}
);
const selectShouldConfirmOnDelete = createSelector(selectSystemSlice, (system) => system.shouldConfirmOnDelete);
const selectIsModalOpen = createSelector(
selectDeleteImageModalSlice,
(deleteImageModal) => deleteImageModal.isModalOpen
);
const DeleteImageModal = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const shouldConfirmOnDelete = useAppSelector((s) => s.system.shouldConfirmOnDelete);
const isModalOpen = useAppSelector((s) => s.deleteImageModal.isModalOpen);
const shouldConfirmOnDelete = useAppSelector(selectShouldConfirmOnDelete);
const isModalOpen = useAppSelector(selectIsModalOpen);
const { imagesToDelete, imagesUsage, imageUsageSummary } = useAppSelector(selectImageUsages);
const handleChangeShouldConfirmOnDelete = useCallback(