Fix hook dependency arrays

6 files changed, 52 insertions, 76 deletions

diff --git a/gui/src/renderer/components/SplitTunnelingSettings.tsx b/gui/src/renderer/components/SplitTunnelingSettings.tsx
index ecbdada23d..bf3b7f58b8 100644
--- a/gui/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/SplitTunnelingSettings.tsx
@@ -457,15 +457,10 @@ export function WindowsSplitTunnelingSettings(props: IPlatformSplitTunnelingSett
         <StyledNoResult>
           <StyledNoResultText>
             {formatHtml(
-              sprintf(
-                messages.gettext('No result for <b>%(searchTerm)s</b>.'),
-                { searchTerm },
-              ),
+              sprintf(messages.gettext('No result for <b>%(searchTerm)s</b>.'), { searchTerm }),
             )}
           </StyledNoResultText>
-          <StyledNoResultText>
-            {messages.gettext('Try a different search.')}
-          </StyledNoResultText>
+          <StyledNoResultText>{messages.gettext('Try a different search.')}</StyledNoResultText>
         </StyledNoResult>
       )}
 
diff --git a/gui/src/renderer/components/select-location/LocationRow.tsx b/gui/src/renderer/components/select-location/LocationRow.tsx
index eb36efc7d3..eafae9c509 100644
--- a/gui/src/renderer/components/select-location/LocationRow.tsx
+++ b/gui/src/renderer/components/select-location/LocationRow.tsx
@@ -150,7 +150,7 @@ function LocationRow<C extends LocationSpecification>(props: IProps<C>) {
         userInvokedExpand.current = false;
       }
     },
-    [props.onWillExpand],
+    [props.onWillExpand, expanded],
   );
 
   // The selectedRef should only be used if the element is selected
diff --git a/gui/src/renderer/components/select-location/SelectLocation.tsx b/gui/src/renderer/components/select-location/SelectLocation.tsx
index 8684ae3d69..67080f5c21 100644
--- a/gui/src/renderer/components/select-location/SelectLocation.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocation.tsx
@@ -6,7 +6,7 @@ import { Ownership } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import { useAppContext } from '../../context';
 import { useHistory } from '../../lib/history';
-import {formatHtml} from '../../lib/html-formatter';
+import { formatHtml } from '../../lib/html-formatter';
 import { RoutePath } from '../../lib/routes';
 import { useNormalBridgeSettings, useNormalRelaySettings } from '../../lib/utilityHooks';
 import { useSelector } from '../../redux/store';
@@ -76,12 +76,12 @@ export default function SelectLocation() {
   const onClearProviders = useCallback(async () => {
     resetScrollPositions();
     await updateRelaySettings({ normal: { providers: [] } });
-  }, []);
+  }, [resetScrollPositions]);
 
   const onClearOwnership = useCallback(async () => {
     resetScrollPositions();
     await updateRelaySettings({ normal: { ownership: Ownership.any } });
-  }, []);
+  }, [resetScrollPositions]);
 
   const changeLocationType = useCallback(
     (locationType: LocationType) => {
@@ -97,7 +97,7 @@ export default function SelectLocation() {
       expandSearchResults(value);
       setSearchTerm(value);
     },
-    [resetScrollPositions],
+    [resetScrollPositions, expandSearchResults],
   );
 
   const showOwnershipFilter = ownership !== Ownership.any;
@@ -247,19 +247,14 @@ function SelectLocationContent() {
 
   if (searchTerm !== '' && relayList.length === 0) {
     return (
-        <StyledNoResult>
-          <StyledNoResultText>
-            {formatHtml(
-              sprintf(
-                messages.gettext('No result for <b>%(searchTerm)s</b>.'),
-                { searchTerm },
-              ),
-            )}
-          </StyledNoResultText>
-          <StyledNoResultText>
-            {messages.gettext('Try a different search.')}
-          </StyledNoResultText>
-        </StyledNoResult>
+      <StyledNoResult>
+        <StyledNoResultText>
+          {formatHtml(
+            sprintf(messages.gettext('No result for <b>%(searchTerm)s</b>.'), { searchTerm }),
+          )}
+        </StyledNoResultText>
+        <StyledNoResultText>{messages.gettext('Try a different search.')}</StyledNoResultText>
+      </StyledNoResult>
     );
   } else if (locationType === LocationType.exit) {
     return (
diff --git a/gui/src/renderer/components/select-location/SelectLocationContainer.tsx b/gui/src/renderer/components/select-location/SelectLocationContainer.tsx
index 7f07931b7a..5843d5e6f4 100644
--- a/gui/src/renderer/components/select-location/SelectLocationContainer.tsx
+++ b/gui/src/renderer/components/select-location/SelectLocationContainer.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useMemo, useState } from 'react';
 
-import { useNormalRelaySettings } from '../../lib/utilityHooks';
 import { RelayListContextProvider } from './RelayListContext';
 import { ScrollPositionContextProvider } from './ScrollPositionContext';
 import { LocationType } from './select-location-types';
@@ -21,15 +20,11 @@ export function useSelectLocationContext() {
 }
 
 export default function SelectLocationContainer() {
-  const relaySettings = useNormalRelaySettings();
   const [locationType, setLocationType] = useState(LocationType.exit);
-
   const [searchTerm, setSearchTerm] = useState('');
 
   const value = useMemo(() => ({ locationType, setLocationType, searchTerm, setSearchTerm }), [
     locationType,
-    relaySettings?.ownership,
-    relaySettings?.providers,
     searchTerm,
   ]);
 
diff --git a/gui/src/renderer/components/select-location/SpecialLocationList.tsx b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
index 6667f14fa9..98179a0c78 100644
--- a/gui/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -59,7 +59,7 @@ function SpecialLocationRow<T>(props: SpecialLocationRowProps<T>) {
         value: props.source.value,
       });
     }
-  }, []);
+  }, [props.source.selected, props.onSelect, props.source.value]);
 
   const selectedRef = props.source.selected ? props.selectedElementRef : undefined;
   return (
diff --git a/gui/src/renderer/components/select-location/select-location-hooks.ts b/gui/src/renderer/components/select-location/select-location-hooks.ts
index a29681ba25..a0f407b790 100644
--- a/gui/src/renderer/components/select-location/select-location-hooks.ts
+++ b/gui/src/renderer/components/select-location/select-location-hooks.ts
@@ -22,17 +22,14 @@ export function useOnSelectLocation() {
   const { locationType, setLocationType } = useSelectLocationContext();
   const baseRelaySettings = useSelector((state) => state.settings.relaySettings);
 
-  const onSelectLocation = useCallback(
-    async (relayUpdate: RelaySettingsUpdate) => {
-      try {
-        await updateRelaySettings(relayUpdate);
-      } catch (e) {
-        const error = e as Error;
-        log.error(`Failed to select the exit location: ${error.message}`);
-      }
-    },
-    [history],
-  );
+  const onSelectLocation = useCallback(async (relayUpdate: RelaySettingsUpdate) => {
+    try {
+      await updateRelaySettings(relayUpdate);
+    } catch (e) {
+      const error = e as Error;
+      log.error(`Failed to select the exit location: ${error.message}`);
+    }
+  }, []);
 
   const onSelectExitLocation = useCallback(
     async (relayLocation: LocationSelection<never>) => {
@@ -43,49 +40,43 @@ export function useOnSelectLocation() {
       await onSelectLocation(relayUpdate);
       await connectTunnel();
     },
-    [onSelectLocation, history],
-  );
-  const onSelectEntryLocation = useCallback(
-    async (entryLocation: LocationSelection<never>) => {
-      setLocationType(LocationType.exit);
-      const relayUpdate = createWireguardRelayUpdater(baseRelaySettings)
-        .tunnel.wireguard((wireguard) => wireguard.entryLocation.exact(entryLocation.value))
-        .build();
-      await onSelectLocation(relayUpdate);
-    },
-    [onSelectLocation],
+    [history],
   );
 
+  const onSelectEntryLocation = useCallback(async (entryLocation: LocationSelection<never>) => {
+    setLocationType(LocationType.exit);
+    const relayUpdate = createWireguardRelayUpdater(baseRelaySettings)
+      .tunnel.wireguard((wireguard) => wireguard.entryLocation.exact(entryLocation.value))
+      .build();
+    await onSelectLocation(relayUpdate);
+  }, []);
+
   return locationType === LocationType.exit ? onSelectExitLocation : onSelectEntryLocation;
 }
 
 export function useOnSelectBridgeLocation() {
-  const history = useHistory();
   const { updateBridgeSettings } = useAppContext();
   const { setLocationType } = useSelectLocationContext();
 
-  return useCallback(
-    async (location: LocationSelection<SpecialBridgeLocationType>) => {
-      let bridgeUpdate;
-      if (location.type === LocationSelectionType.relay) {
-        bridgeUpdate = new BridgeSettingsBuilder().location.fromRaw(location.value).build();
-      } else if (
-        location.type === LocationSelectionType.special &&
-        location.value === SpecialBridgeLocationType.closestToExit
-      ) {
-        bridgeUpdate = new BridgeSettingsBuilder().location.any().build();
-      }
+  return useCallback(async (location: LocationSelection<SpecialBridgeLocationType>) => {
+    let bridgeUpdate;
+    if (location.type === LocationSelectionType.relay) {
+      bridgeUpdate = new BridgeSettingsBuilder().location.fromRaw(location.value).build();
+    } else if (
+      location.type === LocationSelectionType.special &&
+      location.value === SpecialBridgeLocationType.closestToExit
+    ) {
+      bridgeUpdate = new BridgeSettingsBuilder().location.any().build();
+    }
 
-      if (bridgeUpdate) {
-        setLocationType(LocationType.exit);
-        try {
-          await updateBridgeSettings(bridgeUpdate);
-        } catch (e) {
-          const error = e as Error;
-          log.error(`Failed to select the bridge location: ${error.message}`);
-        }
+    if (bridgeUpdate) {
+      setLocationType(LocationType.exit);
+      try {
+        await updateBridgeSettings(bridgeUpdate);
+      } catch (e) {
+        const error = e as Error;
+        log.error(`Failed to select the bridge location: ${error.message}`);
       }
-    },
-    [history, updateBridgeSettings],
-  );
+    }
+  }, []);
 }