Remove state and just memoize the values

1 files changed, 40 insertions, 41 deletions

diff --git a/gui/src/renderer/containers/SelectLocationPage.tsx b/gui/src/renderer/containers/SelectLocationPage.tsx
index 5c72bc7d28..ab40b54810 100644
--- a/gui/src/renderer/containers/SelectLocationPage.tsx
+++ b/gui/src/renderer/containers/SelectLocationPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import BridgeSettingsBuilder from '../../shared/bridge-settings-builder';
 import { LiftedConstraint, Ownership, RelayLocation } from '../../shared/daemon-rpc-types';
@@ -10,19 +10,8 @@ import { createWireguardRelayUpdater } from '../lib/constraint-updater';
 import filterLocations from '../lib/filter-locations';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
-import { RelaySettingsRedux } from '../redux/settings/reducers';
 import { useSelector } from '../redux/store';
 
-const getExitLocation = (relaySettings: RelaySettingsRedux): RelayLocation | undefined => {
-  if ('normal' in relaySettings) {
-    const exitLocation = relaySettings.normal.location;
-    if (exitLocation !== 'any') {
-      return exitLocation;
-    }
-  }
-  return undefined;
-};
-
 export default function SelectLocationPage() {
   const history = useHistory();
 
@@ -32,15 +21,6 @@ export default function SelectLocationPage() {
   const settings = useSelector((state) => state.settings);
   const { relaySettings, bridgeSettings, bridgeState } = settings;
 
-  const [multihopEnabled, setMultihopEnabled] = useState(false);
-  const [selectedExitLocation, setSelectedExitLocation] = useState<RelayLocation | undefined>(() =>
-    getExitLocation(relaySettings),
-  );
-  const [selectedEntryLocation, setSelectedEntryLocation] = useState<RelayLocation>();
-  const [selectedBridgeLocation, setSelectedBridgeLocation] = useState<
-    LiftedConstraint<RelayLocation>
-  >();
-
   const providers = useMemo(
     () => ('normal' in relaySettings ? relaySettings.normal.providers : []),
     [relaySettings],
@@ -56,6 +36,45 @@ export default function SelectLocationPage() {
     [relaySettings],
   );
 
+  const selectedExitLocation = useMemo<RelayLocation | undefined>(() => {
+    if ('normal' in relaySettings) {
+      const exitLocation = relaySettings.normal.location;
+      if (exitLocation !== 'any') {
+        return exitLocation;
+      }
+    }
+    return undefined;
+  }, [relaySettings]);
+
+  const selectedBridgeLocation = useMemo<LiftedConstraint<RelayLocation> | undefined>(() => {
+    return tunnelProtocol === 'openvpn' && 'normal' in bridgeSettings
+      ? bridgeSettings.normal.location
+      : undefined;
+  }, [tunnelProtocol, bridgeSettings]);
+
+  const multihopEnabled = useMemo(() => {
+    if (
+      !(tunnelProtocol === 'openvpn' && 'normal' in bridgeSettings) &&
+      'normal' in relaySettings
+    ) {
+      return relaySettings.normal.wireguard.useMultihop;
+    }
+    return false;
+  }, [tunnelProtocol, relaySettings]);
+
+  const selectedEntryLocation = useMemo<RelayLocation | undefined>(() => {
+    if (
+      !(tunnelProtocol === 'openvpn' && 'normal' in bridgeSettings) &&
+      'normal' in relaySettings
+    ) {
+      const entryLocation = relaySettings.normal.wireguard.entryLocation;
+      if (multihopEnabled && entryLocation !== 'any') {
+        return entryLocation;
+      }
+    }
+    return undefined;
+  }, [relaySettings, multihopEnabled]);
+
   const allowEntrySelection = useMemo(() => {
     return (
       (tunnelProtocol === 'openvpn' && bridgeState === 'on') ||
@@ -137,26 +156,6 @@ export default function SelectLocationPage() {
     await updateRelaySettings({ normal: { ownership: Ownership.any } });
   }, [updateRelaySettings]);
 
-  useEffect(() => {
-    if (tunnelProtocol === 'openvpn' && 'normal' in bridgeSettings) {
-      setSelectedBridgeLocation(bridgeSettings.normal.location);
-    } else if ('normal' in relaySettings) {
-      setMultihopEnabled(relaySettings.normal.wireguard.useMultihop);
-
-      const entryLocation = relaySettings.normal.wireguard.entryLocation;
-      if (multihopEnabled && entryLocation !== 'any') {
-        setSelectedEntryLocation(entryLocation);
-      }
-    }
-  }, [multihopEnabled, tunnelProtocol, bridgeSettings, relaySettings]);
-
-  useEffect(() => {
-    const exitLocation = getExitLocation(relaySettings);
-    if (exitLocation) {
-      setSelectedExitLocation(exitLocation);
-    }
-  }, [relaySettings]);
-
   return (
     <SelectLocation
       locale={locale}