feat(ui): upgrade redux and RTK

There are a few breaking changes, which I've addressed.

The vast majority of changes are related to new handling of `reselect`'s `createSelector` options.

For better or worse, we memoize just about all our selectors using lodash `isEqual` for `resultEqualityCheck`. The upgrade requires we explicitly set the `memoize` option to `lruMemoize` to continue using lodash here.

Doing that required changing our `defaultSelectorOptions`.

Instead of changing that and finding dozens of instances where we weren't using that and instead were defining selector options manually, I've created a pre-configured selector: `createMemoizedSelector`.

This is now used everywhere instead of `createSelector`.

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

@@ -1,37 +1,32 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { keys, map } from 'lodash-es';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
 import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate';
+import { keys, map } from 'lodash-es';
+import { useMemo } from 'react';
 
 export const useAnyOrDirectInputFieldNames = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return [];
-          }
-          const nodeTemplate = nodes.nodeTemplates[node.data.type];
-          if (!nodeTemplate) {
-            return [];
-          }
-          const fields = map(nodeTemplate.inputs).filter(
-            (field) =>
-              (['any', 'direct'].includes(field.input) ||
-                field.type.isCollectionOrScalar) &&
-              keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
-          );
-          return getSortedFilteredFieldNames(fields);
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return [];
+        }
+        const nodeTemplate = nodes.nodeTemplates[node.data.type];
+        if (!nodeTemplate) {
+          return [];
+        }
+        const fields = map(nodeTemplate.inputs).filter(
+          (field) =>
+            (['any', 'direct'].includes(field.input) ||
+              field.type.isCollectionOrScalar) &&
+            keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
+        );
+        return getSortedFilteredFieldNames(fields);
+      }),
     [nodeId]
   );
 

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

@@ -1,8 +1,6 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useCallback } from 'react';
-import { Node, useReactFlow } from 'reactflow';
 import {
   DRAG_HANDLE_CLASSNAME,
   NODE_WIDTH,
@@ -11,8 +9,10 @@ import { AnyNode, InvocationTemplate } from 'features/nodes/types/invocation';
 import { buildCurrentImageNode } from 'features/nodes/util/node/buildCurrentImageNode';
 import { buildInvocationNode } from 'features/nodes/util/node/buildInvocationNode';
 import { buildNotesNode } from 'features/nodes/util/node/buildNotesNode';
+import { useCallback } from 'react';
+import { Node, useReactFlow } from 'reactflow';
 
-const templatesSelector = createSelector(
+const templatesSelector = createMemoizedSelector(
   [(state: RootState) => state.nodes],
   (nodes) => nodes.nodeTemplates
 );

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

@@ -1,40 +1,35 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { keys, map } from 'lodash-es';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
 import { TEMPLATE_BUILDER_MAP } from 'features/nodes/util/schema/buildFieldInputTemplate';
+import { keys, map } from 'lodash-es';
+import { useMemo } from 'react';
 
 export const useConnectionInputFieldNames = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return [];
-          }
-          const nodeTemplate = nodes.nodeTemplates[node.data.type];
-          if (!nodeTemplate) {
-            return [];
-          }
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return [];
+        }
+        const nodeTemplate = nodes.nodeTemplates[node.data.type];
+        if (!nodeTemplate) {
+          return [];
+        }
 
-          // get the visible fields
-          const fields = map(nodeTemplate.inputs).filter(
-            (field) =>
-              (field.input === 'connection' &&
-                !field.type.isCollectionOrScalar) ||
-              !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
-          );
+        // get the visible fields
+        const fields = map(nodeTemplate.inputs).filter(
+          (field) =>
+            (field.input === 'connection' &&
+              !field.type.isCollectionOrScalar) ||
+            !keys(TEMPLATE_BUILDER_MAP).includes(field.type.name)
+        );
 
-          return getSortedFilteredFieldNames(fields);
-        },
-        defaultSelectorOptions
-      ),
+        return getSortedFilteredFieldNames(fields);
+      }),
     [nodeId]
   );
 

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

@@ -1,11 +1,11 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { makeConnectionErrorSelector } from 'features/nodes/store/util/makeIsConnectionValidSelector';
 import { useMemo } from 'react';
 import { useFieldType } from './useFieldType.ts';
 
-const selectIsConnectionInProgress = createSelector(
+const selectIsConnectionInProgress = createMemoizedSelector(
   stateSelector,
   ({ nodes }) =>
     nodes.connectionStartFieldType !== null &&
@@ -27,7 +27,7 @@ export const useConnectionState = ({
 
   const selectIsConnected = useMemo(
     () =>
-      createSelector(stateSelector, ({ nodes }) =>
+      createMemoizedSelector(stateSelector, ({ nodes }) =>
         Boolean(
           nodes.edges.filter((edge) => {
             return (
@@ -54,7 +54,7 @@ export const useConnectionState = ({
 
   const selectIsConnectionStartField = useMemo(
     () =>
-      createSelector(stateSelector, ({ nodes }) =>
+      createMemoizedSelector(stateSelector, ({ nodes }) =>
         Boolean(
           nodes.connectionStartParams?.nodeId === nodeId &&
             nodes.connectionStartParams?.handleId === fieldName &&

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

@@ -1,29 +1,24 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { compareVersions } from 'compare-versions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useDoNodeVersionsMatch = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          if (!nodeTemplate?.version || !node.data?.version) {
-            return false;
-          }
-          return compareVersions(nodeTemplate.version, node.data.version) === 0;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
+        }
+        const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+        if (!nodeTemplate?.version || !node.data?.version) {
+          return false;
+        }
+        return compareVersions(nodeTemplate.version, node.data.version) === 0;
+      }),
     [nodeId]
   );
 

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

@@ -1,24 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useDoesInputHaveValue = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          return node?.data.inputs[fieldName]?.value !== undefined;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node?.data.inputs[fieldName]?.value !== undefined;
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,24 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldInstance = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          return node?.data.inputs[fieldName];
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node?.data.inputs[fieldName];
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,24 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldInputInstance = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          return node.data.inputs[fieldName];
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node.data.inputs[fieldName];
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,26 +1,21 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldInputKind = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          const fieldTemplate = nodeTemplate?.inputs[fieldName];
-          return fieldTemplate?.input;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+        const fieldTemplate = nodeTemplate?.inputs[fieldName];
+        return fieldTemplate?.input;
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,25 +1,20 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldInputTemplate = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          return nodeTemplate?.inputs[fieldName];
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+        return nodeTemplate?.inputs[fieldName];
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,24 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldLabel = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          return node?.data.inputs[fieldName]?.label;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node?.data.inputs[fieldName]?.label;
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,24 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldOutputInstance = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          return node.data.outputs[fieldName];
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        return node.data.outputs[fieldName];
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,25 +1,20 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldOutputTemplate = (nodeId: string, fieldName: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          return nodeTemplate?.outputs[fieldName];
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+        return nodeTemplate?.outputs[fieldName];
+      }),
     [fieldName, nodeId]
   );
 

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

@@ -1,10 +1,9 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { KIND_MAP } from 'features/nodes/types/constants';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldTemplate = (
   nodeId: string,
@@ -13,18 +12,14 @@ export const useFieldTemplate = (
 ) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          return nodeTemplate?.[KIND_MAP[kind]][fieldName];
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+        return nodeTemplate?.[KIND_MAP[kind]][fieldName];
+      }),
     [fieldName, kind, nodeId]
   );
 

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

@@ -1,10 +1,9 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
-import { isInvocationNode } from 'features/nodes/types/invocation';
 import { KIND_MAP } from 'features/nodes/types/constants';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldTemplateTitle = (
   nodeId: string,
@@ -13,18 +12,14 @@ export const useFieldTemplateTitle = (
 ) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          return nodeTemplate?.[KIND_MAP[kind]][fieldName]?.title;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+        return nodeTemplate?.[KIND_MAP[kind]][fieldName]?.title;
+      }),
     [fieldName, kind, nodeId]
   );
 

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

@@ -1,10 +1,9 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { KIND_MAP } from 'features/nodes/types/constants';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useFieldType = (
   nodeId: string,
@@ -13,18 +12,14 @@ export const useFieldType = (
 ) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return;
-          }
-          const field = node.data[KIND_MAP[kind]][fieldName];
-          return field?.type;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return;
+        }
+        const field = node.data[KIND_MAP[kind]][fieldName];
+        return field?.type;
+      }),
     [fieldName, kind, nodeId]
   );
 

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

@@ -1,27 +1,22 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
 
-const selector = createSelector(
-  stateSelector,
-  (state) => {
-    const nodes = state.nodes.nodes;
-    const templates = state.nodes.nodeTemplates;
+const selector = createMemoizedSelector(stateSelector, (state) => {
+  const nodes = state.nodes.nodes;
+  const templates = state.nodes.nodeTemplates;
 
-    const needsUpdate = nodes.filter(isInvocationNode).some((node) => {
-      const template = templates[node.data.type];
-      if (!template) {
-        return false;
-      }
-      return getNeedsUpdate(node, template);
-    });
-    return needsUpdate;
-  },
-  defaultSelectorOptions
-);
+  const needsUpdate = nodes.filter(isInvocationNode).some((node) => {
+    const template = templates[node.data.type];
+    if (!template) {
+      return false;
+    }
+    return getNeedsUpdate(node, template);
+  });
+  return needsUpdate;
+});
 
 export const useGetNodesNeedUpdate = () => {
   const getNeedsUpdate = useAppSelector(selector);

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

@@ -1,31 +1,26 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { isInvocationNode } from 'features/nodes/types/invocation';
 import { some } from 'lodash-es';
 import { useMemo } from 'react';
-import { isInvocationNode } from 'features/nodes/types/invocation';
 
 export const useHasImageOutput = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          return some(
-            node.data.outputs,
-            (output) =>
-              output.type.name === 'ImageField' &&
-              // the image primitive node (node type "image") does not actually save the image, do not show the image-saving checkboxes
-              node.data.type !== 'image'
-          );
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
+        }
+        return some(
+          node.data.outputs,
+          (output) =>
+            output.type.name === 'ImageField' &&
+            // the image primitive node (node type "image") does not actually save the image, do not show the image-saving checkboxes
+            node.data.type !== 'image'
+        );
+      }),
     [nodeId]
   );
 

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

@@ -1,24 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useIsIntermediate = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          return node.data.isIntermediate;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
+        }
+        return node.data.isIntermediate;
+      }),
     [nodeId]
   );
 

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

@@ -1,20 +1,18 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useCallback, useMemo } from 'react';
 import { mouseOverFieldChanged } from 'features/nodes/store/nodesSlice';
+import { useCallback, useMemo } from 'react';
 
 export const useIsMouseOverField = (nodeId: string, fieldName: string) => {
   const dispatch = useAppDispatch();
   const selector = useMemo(
     () =>
-      createSelector(
+      createMemoizedSelector(
         stateSelector,
         ({ nodes }) =>
           nodes.mouseOverField?.nodeId === nodeId &&
-          nodes.mouseOverField?.fieldName === fieldName,
-        defaultSelectorOptions
+          nodes.mouseOverField?.fieldName === fieldName
       ),
     [fieldName, nodeId]
   );

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

@@ -1,18 +1,16 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useCallback, useMemo } from 'react';
 import { mouseOverNodeChanged } from 'features/nodes/store/nodesSlice';
+import { useCallback, useMemo } from 'react';
 
 export const useMouseOverNode = (nodeId: string) => {
   const dispatch = useAppDispatch();
   const selector = useMemo(
     () =>
-      createSelector(
+      createMemoizedSelector(
         stateSelector,
-        ({ nodes }) => nodes.mouseOverNode === nodeId,
-        defaultSelectorOptions
+        ({ nodes }) => nodes.mouseOverNode === nodeId
       ),
     [nodeId]
   );

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

@@ -1,20 +1,15 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { useMemo } from 'react';
 
 export const useNodeData = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          return node?.data;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        return node?.data;
+      }),
     [nodeId]
   );
 

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

@@ -1,25 +1,20 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useNodeLabel = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
+        }
 
-          return node.data.label;
-        },
-        defaultSelectorOptions
-      ),
+        return node.data.label;
+      }),
     [nodeId]
   );
 

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

@@ -1,23 +1,18 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getNeedsUpdate } from 'features/nodes/util/node/nodeUpdate';
+import { useMemo } from 'react';
 
 export const useNodeNeedsUpdate = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          const template = nodes.nodeTemplates[node?.data.type ?? ''];
-          return { node, template };
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        const template = nodes.nodeTemplates[node?.data.type ?? ''];
+        return { node, template };
+      }),
     [nodeId]
   );
 

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

@@ -1,24 +1,19 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useNodePack = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          return node.data.nodePack;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
+        }
+        return node.data.nodePack;
+      }),
     [nodeId]
   );
 

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

@@ -1,21 +1,16 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { useMemo } from 'react';
 
 export const useNodeTemplate = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
-          return nodeTemplate;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        const nodeTemplate = nodes.nodeTemplates[node?.data.type ?? ''];
+        return nodeTemplate;
+      }),
     [nodeId]
   );
 

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

@@ -1,20 +1,18 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { InvocationTemplate } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useNodeTemplateByType = (type: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
+      createMemoizedSelector(
         stateSelector,
         ({ nodes }): InvocationTemplate | undefined => {
           const nodeTemplate = nodes.nodeTemplates[type];
           return nodeTemplate;
-        },
-        defaultSelectorOptions
+        }
       ),
     [type]
   );

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

@@ -1,28 +1,23 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useNodeTemplateTitle = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          const nodeTemplate = node
-            ? nodes.nodeTemplates[node.data.type]
-            : undefined;
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
+        }
+        const nodeTemplate = node
+          ? nodes.nodeTemplates[node.data.type]
+          : undefined;
 
-          return nodeTemplate?.title;
-        },
-        defaultSelectorOptions
-      ),
+        return nodeTemplate?.title;
+      }),
     [nodeId]
   );
 

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

@@ -1,31 +1,26 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { map } from 'lodash-es';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getSortedFilteredFieldNames } from 'features/nodes/util/node/getSortedFilteredFieldNames';
+import { map } from 'lodash-es';
+import { useMemo } from 'react';
 
 export const useOutputFieldNames = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return [];
-          }
-          const nodeTemplate = nodes.nodeTemplates[node.data.type];
-          if (!nodeTemplate) {
-            return [];
-          }
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return [];
+        }
+        const nodeTemplate = nodes.nodeTemplates[node.data.type];
+        if (!nodeTemplate) {
+          return [];
+        }
 
-          return getSortedFilteredFieldNames(map(nodeTemplate.outputs));
-        },
-        defaultSelectorOptions
-      ),
+        return getSortedFilteredFieldNames(map(nodeTemplate.outputs));
+      }),
     [nodeId]
   );
 

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

@@ -1,26 +1,21 @@
-import { createSelector } from '@reduxjs/toolkit';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { useMemo } from 'react';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { useMemo } from 'react';
 
 export const useUseCache = (nodeId: string) => {
   const selector = useMemo(
     () =>
-      createSelector(
-        stateSelector,
-        ({ nodes }) => {
-          const node = nodes.nodes.find((node) => node.id === nodeId);
-          if (!isInvocationNode(node)) {
-            return false;
-          }
-          // cast to boolean to support older workflows that didn't have useCache
-          // TODO: handle this better somehow
-          return node.data.useCache;
-        },
-        defaultSelectorOptions
-      ),
+      createMemoizedSelector(stateSelector, ({ nodes }) => {
+        const node = nodes.nodes.find((node) => node.id === nodeId);
+        if (!isInvocationNode(node)) {
+          return false;
+        }
+        // cast to boolean to support older workflows that didn't have useCache
+        // TODO: handle this better somehow
+        return node.data.useCache;
+      }),
     [nodeId]
   );