feat(ui): clean up a few selectors that do not need to be memoized

invokeai/frontend/web/src/app/logging/useLogger.ts

@@ -1,23 +1,14 @@
 import { createLogWriter } from '@roarr/browser-log-writer';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { useEffect, useMemo } from 'react';
 import { ROARR, Roarr } from 'roarr';
 
 import type { LoggerNamespace } from './logger';
 import { $logger, BASE_CONTEXT, LOG_LEVEL_MAP, logger } from './logger';
-const selector = createMemoizedSelector(selectSystemSlice, (system) => {
-  const { consoleLogLevel, shouldLogToConsole } = system;
-
-  return {
-    consoleLogLevel,
-    shouldLogToConsole,
-  };
-});
 
 export const useLogger = (namespace: LoggerNamespace) => {
-  const { consoleLogLevel, shouldLogToConsole } = useAppSelector(selector);
+  const consoleLogLevel = useAppSelector((s) => s.system.consoleLogLevel);
+  const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
 
   // The provided Roarr browser log writer uses localStorage to config logging to console
   useEffect(() => {

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

@@ -1,28 +1,16 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
-import { redo, selectCanvasSlice } from 'features/canvas/store/canvasSlice';
+import { redo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaRedo } from 'react-icons/fa';
 
-const canvasRedoSelector = createMemoizedSelector(
-  [selectCanvasSlice, activeTabNameSelector],
-  (canvas, activeTabName) => {
-    const { futureLayerStates } = canvas;
-
-    return {
-      canRedo: futureLayerStates.length > 0,
-      activeTabName,
-    };
-  }
-);
-
 const IAICanvasRedoButton = () => {
   const dispatch = useAppDispatch();
-  const { canRedo, activeTabName } = useAppSelector(canvasRedoSelector);
+  const canRedo = useAppSelector((s) => s.canvas.futureLayerStates.length > 0);
+  const activeTabName = useAppSelector(activeTabNameSelector);
 
   const { t } = useTranslation();
 

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

@@ -1,5 +1,4 @@
 import { Box, Flex } from '@chakra-ui/react';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIColorPicker from 'common/components/IAIColorPicker';
 import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
@@ -16,7 +15,6 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import {
   addEraseRect,
   addFillRect,
-  selectCanvasSlice,
   setBrushColor,
   setBrushSize,
   setTool,
@@ -36,23 +34,12 @@ import {
   FaTimes,
 } from 'react-icons/fa';
 
-export const selector = createMemoizedSelector(
-  [selectCanvasSlice, isStagingSelector],
-  (canvas, isStaging) => {
-    const { tool, brushColor, brushSize } = canvas;
-
-    return {
-      tool,
-      isStaging,
-      brushColor,
-      brushSize,
-    };
-  }
-);
-
 const IAICanvasToolChooserOptions = () => {
   const dispatch = useAppDispatch();
-  const { tool, brushColor, brushSize, isStaging } = useAppSelector(selector);
+  const tool = useAppSelector((s) => s.canvas.tool);
+  const brushColor = useAppSelector((s) => s.canvas.brushColor);
+  const brushSize = useAppSelector((s) => s.canvas.brushSize);
+  const isStaging = useAppSelector(isStagingSelector);
   const { t } = useTranslation();
 
   useHotkeys(

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

@@ -1,31 +1,17 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
-import { selectCanvasSlice, undo } from 'features/canvas/store/canvasSlice';
+import { undo } from 'features/canvas/store/canvasSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaUndo } from 'react-icons/fa';
 
-const canvasUndoSelector = createMemoizedSelector(
-  [selectCanvasSlice, activeTabNameSelector],
-  (canvas, activeTabName) => {
-    const { pastLayerStates } = canvas;
-
-    return {
-      canUndo: pastLayerStates.length > 0,
-      activeTabName,
-    };
-  }
-);
-
 const IAICanvasUndoButton = () => {
   const dispatch = useAppDispatch();
-
   const { t } = useTranslation();
-
+  const activeTabName = useAppSelector(activeTabNameSelector);
-  const { canUndo, activeTabName } = useAppSelector(canvasUndoSelector);
+  const canUndo = useAppSelector((s) => s.canvas.pastLayerStates.length > 0);
 
   const handleUndo = useCallback(() => {
     dispatch(undo());