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,44 +35,54 @@ export const useSlashCommandProcessor = (
   getNextMessageId: (baseTimestamp: number) => number,
   openThemeDialog: () => void,
 ) => {
-  const slashCommands: SlashCommand[] = [
-    {
-      name: 'help',
-      altName: '?',
-      description: 'for help on gemini-code',
-      action: (_value: PartListUnion) => {
-        setDebugMessage('Opening help.');
-        setShowHelp(true);
+  const slashCommands: SlashCommand[] = useMemo(
+    () => [
+      {
+        name: 'help',
+        altName: '?',
+        description: 'for help on gemini-code',
+        action: (_value: PartListUnion) => {
+          setDebugMessage('Opening help.');
+          setShowHelp(true);
+        },
       },
-    },
-    {
-      name: 'clear',
-      description: 'clear the screen',
-      action: (_value: PartListUnion) => {
-        // This just clears the *UI* history, not the model history.
-        setDebugMessage('Clearing terminal.');
-        setHistory((_) => []);
-        refreshStatic();
+      {
+        name: 'clear',
+        description: 'clear the screen',
+        action: (_value: PartListUnion) => {
+          // This just clears the *UI* history, not the model history.
+          setDebugMessage('Clearing terminal.');
+          setHistory((_) => []);
+          refreshStatic();
+        },
       },
-    },
-    {
-      name: 'theme',
-      description: 'change the theme',
-      action: (_value: PartListUnion) => {
-        openThemeDialog();
+      {
+        name: 'theme',
+        description: 'change the theme',
+        action: (_value: PartListUnion) => {
+          openThemeDialog();
+        },
       },
-    },
-    {
-      name: 'quit',
-      altName: 'exit',
-      description: '',
-      action: (_value: PartListUnion) => {
-        setDebugMessage('Quitting. Good-bye.');
-        getNextMessageId(Date.now());
-        process.exit(0);
+      {
+        name: 'quit',
+        altName: 'exit',
+        description: '',
+        action: (_value: PartListUnion) => {
+          setDebugMessage('Quitting. Good-bye.');
+          getNextMessageId(Date.now());
+          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 {