Refactor: Memoize hook callbacks, update dependencies, and fix lint errors (#268)

Co-authored-by: N. Taylor Mullen <ntaylormullen@google.com>

packages/cli/src/ui/hooks/slashCommandProcessor.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { type PartListUnion } from '@google/genai';
 import { HistoryItem } from '../types.js';
 import { getCommandFromQuery } from '../utils/commandUtils.js';
@@ -35,7 +35,8 @@ export const useSlashCommandProcessor = (
   getNextMessageId: (baseTimestamp: number) => number,
   openThemeDialog: () => void,
 ) => {
-  const slashCommands: SlashCommand[] = [
+  const slashCommands: SlashCommand[] = useMemo(
+    () => [
       {
         name: 'help',
         altName: '?',
@@ -72,7 +73,16 @@ export const useSlashCommandProcessor = (
           process.exit(0);
         },
       },
-  ];
+    ],
+    [
+      setDebugMessage,
+      setShowHelp,
+      setHistory,
+      refreshStatic,
+      openThemeDialog,
+      getNextMessageId,
+    ],
+  );
 
   // Checks if the query is a slash command and executes the command if it is.
   const handleSlashCommand = useCallback(
@@ -109,7 +119,7 @@ export const useSlashCommandProcessor = (
 
       return false; // Not a recognized slash command
     },
-    [setDebugMessage, setHistory, getNextMessageId, slashCommands],
+    [setHistory, slashCommands],
   );
 
   return { handleSlashCommand, slashCommands };

packages/cli/src/ui/hooks/useCompletion.ts

@@ -220,7 +220,7 @@ export function useCompletion(
       isMounted = false;
       clearTimeout(debounceTimeout);
     };
-  }, [query, cwd, isActive, resetCompletionState]);
+  }, [query, cwd, isActive, resetCompletionState, slashCommands]);
 
   return {
     suggestions,

packages/cli/src/ui/hooks/useGeminiStream.ts

@@ -101,7 +101,7 @@ export const useGeminiStream = (
         );
       }
     }
-  }, [config.getApiKey(), config.getModel()]);
+  }, [config]);
 
   // Input Handling Effect (remains the same)
   useInput((input, key) => {
@@ -532,10 +532,13 @@ export const useGeminiStream = (
       getNextMessageId,
       updateGeminiMessage,
       handleSlashCommand,
+      handleShellCommand,
       // handleAtCommand is implicitly included via its direct call
       setDebugMessage, // Added dependency for handleAtCommand & passthrough
       setStreamingState, // Added dependency for handlePassthroughCommand
       updateAndAddGeminiMessageContent,
+      setShowHelp,
+      toolRegistry,
     ],
   );
 

packages/cli/src/ui/hooks/useThemeCommand.ts

@@ -35,14 +35,14 @@ export const useThemeCommand = (
     setIsThemeDialogOpen(true);
   }, []);
 
-  function applyTheme(themeName: string | undefined) {
+  const applyTheme = useCallback((themeName: string | undefined) => {
     try {
       themeManager.setActiveTheme(themeName);
       setForceRender((v) => v + 1); // Trigger potential re-render
     } catch (error) {
       console.error(`Error setting theme: ${error}`);
     }
-  }
+  }, []);
 
   const handleThemeHighlight = useCallback(
     (themeName: string | undefined) => {
@@ -61,7 +61,7 @@ export const useThemeCommand = (
         setIsThemeDialogOpen(false); // Close the dialog
       }
     },
-    [applyTheme], // Added applyTheme to dependencies
+    [applyTheme, loadedSettings],
   );
 
   return {