Fix re-renders from adding too many dependencies to useEffect (#2123)

Co-authored-by: Alex Hancock <alexhancock@block.xyz>

ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx

@@ -32,7 +32,8 @@ export default function ExtensionsSection() {
 
   useEffect(() => {
     fetchExtensions();
-  }, [fetchExtensions]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const handleExtensionToggle = async (extension: FixedExtensionEntry) => {
     // If extension is enabled, we are trying to toggle if off, otherwise on

ui/desktop/src/components/settings_v2/models/ModelsSection.tsx

@@ -43,19 +43,9 @@ export default function ModelsSection({ setView }: ModelsSectionProps) {
   }, [read, getProviders]);
 
   useEffect(() => {
-    // Initial load
     loadModelData();
-
-    // Set up polling interval to check for changes
-    const interval = setInterval(() => {
-      loadModelData();
-    }, 1000); // Check every second
-
-    // Clean up interval on unmount
-    return () => {
-      clearInterval(interval);
-    };
-  }, [loadModelData]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <section id="models" className="px-8">

ui/desktop/src/components/settings_v2/models/bottom_bar/ModelsBottomBar.tsx

@@ -27,7 +27,7 @@ export default function ModelsBottomBar({ dropdownRef, setView }: ModelsBottomBa
       setProvider(modelProvider.provider);
       setModel(modelProvider.model);
     })();
-  }, [read, getProviders]);
+  });
 
   // Add click outside handler
   useEffect(() => {

ui/desktop/src/components/settings_v2/models/subcomponents/AddModelModal.tsx

@@ -96,7 +96,7 @@ export const AddModelModal = ({ onClose, setView }: AddModelModalProps) => {
     if (attemptedSubmit) {
       validateForm();
     }
-  }, [provider, model, attemptedSubmit, validateForm]);
+  }, [attemptedSubmit, validateForm]);
 
   useEffect(() => {
     (async () => {

ui/desktop/src/components/settings_v2/providers/modal/subcomponents/forms/DefaultProviderSetupForm.tsx

@@ -99,7 +99,8 @@ export default function DefaultProviderSetupForm({
 
   useEffect(() => {
     loadConfigValues();
-  }, [loadConfigValues]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   // Filter parameters to only show required ones
   const requiredParameters = useMemo(() => {

ui/desktop/src/components/ui/DeepLinkModal.tsx

@@ -61,7 +61,8 @@ export function DeepLinkModal({ botConfig: initialBotConfig, onClose }: DeepLink
       instructions,
       activities,
     });
-  }, [instructions, activities, botConfig]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instructions, activities]);
 
   // Handle adding a new activity
   const handleAddActivity = () => {

ui/desktop/tests/e2e/app.spec.ts

@@ -525,12 +525,6 @@ test.describe('Goose App', () => {
       
           // Wait a bit and dump HTML to see structure
           await mainWindow.waitForTimeout(1000);
-          const html = await mainWindow.evaluate(() => document.documentElement.outerHTML);
-          console.log('Full page HTML after clicking Output:', html);
-      
-          // Also dump just the response area HTML
-          const responseHtml = await response.evaluate(el => el.outerHTML);
-          console.log('Response area HTML:', responseHtml);
       
           // Take screenshot before trying to find content
           await mainWindow.screenshot({ path: `test-results/${provider.name.toLowerCase()}-quote-response-debug.png` });