optimizations

interface/src/app/settings/network/Network.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import {
   Navigate,
   Route,
@@ -28,8 +28,7 @@ const Network = () => {
     [
       {
         path: '/settings/network/settings',
-        element: <NetworkSettings />,
-        dog: 'woof'
+        element: <NetworkSettings />
       },
       { path: '/settings/network/scan', element: <WiFiNetworkScanner /> }
     ],
@@ -53,14 +52,17 @@ const Network = () => {
     setSelectedNetwork(undefined);
   }, []);
 
+  const contextValue = useMemo(
+    () => ({
+      ...(selectedNetwork && { selectedNetwork }),
+      selectNetwork,
+      deselectNetwork
+    }),
+    [selectedNetwork, selectNetwork, deselectNetwork]
+  );
+
   return (
-    <WiFiConnectionContext.Provider
-      value={{
-        ...(selectedNetwork && { selectedNetwork }),
-        selectNetwork,
-        deselectNetwork
-      }}
-    >
+    <WiFiConnectionContext.Provider value={contextValue}>
       <RouterTabs value={routerTab}>
         <Tab
           value="/settings/network/settings"
@@ -80,4 +82,4 @@ const Network = () => {
   );
 };
 
-export default Network;
+export default memo(Network);

interface/src/app/settings/network/NetworkSettings.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -109,38 +109,37 @@ const NetworkSettings = () => {
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
-  useEffect(() => deselectNetwork, [deselectNetwork]);
+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
+    try {
+      setFieldErrors(undefined);
+      await validate(createNetworkSettingsValidator(data), data);
+      await saveData();
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+    deselectNetwork();
+  }, [data, saveData, deselectNetwork]);
+
+  const setCancel = useCallback(async () => {
+    deselectNetwork();
+    await loadData();
+  }, [deselectNetwork, loadData]);
+
+  const doRestart = useCallback(async () => {
+    setRestarting(true);
+    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
+  }, [sendAPI]);
 
   const content = () => {
     if (!data) {
       return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
     }
 
-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(createNetworkSettingsValidator(data), data);
-        await saveData();
-      } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
-      }
-      deselectNetwork();
-    };
-
-    const setCancel = async () => {
-      deselectNetwork();
-      await loadData();
-    };
-
-    const doRestart = async () => {
-      setRestarting(true);
-      await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-        (error: Error) => {
-          toast.error(error.message);
-        }
-      );
-    };
-
     return (
       <>
         <Typography variant="h6" color="primary">
@@ -405,4 +404,4 @@ const NetworkSettings = () => {
   );
 };
 
-export default NetworkSettings;
+export default memo(NetworkSettings);

interface/src/app/settings/network/WiFiNetworkScanner.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import { Button } from '@mui/material';
@@ -48,12 +48,12 @@ const WiFiNetworkScanner = () => {
     }
   });
 
-  const renderNetworkScanner = () => {
+  const renderNetworkScanner = useCallback(() => {
     if (!networkList) {
       return <FormLoader errorMessage={errorMessage || ''} />;
     }
     return <WiFiNetworkSelector networkList={networkList} />;
-  };
+  }, [networkList, errorMessage]);
 
   return (
     <SectionContent>
@@ -73,4 +73,4 @@ const WiFiNetworkScanner = () => {
   );
 };
 
-export default WiFiNetworkScanner;
+export default memo(WiFiNetworkScanner);

interface/src/app/settings/network/WiFiNetworkSelector.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';
 
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -63,31 +63,34 @@ const WiFiNetworkSelector = ({ networkList }: { networkList: WiFiNetworkList })
 
   const wifiConnectionContext = useContext(WiFiConnectionContext);
 
-  const renderNetwork = (network: WiFiNetwork) => (
-    <ListItem
-      key={network.bssid}
-      onClick={() => wifiConnectionContext.selectNetwork(network)}
-    >
-      <ListItemAvatar>
-        <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
-      </ListItemAvatar>
-      <ListItemText
-        primary={network.ssid}
-        secondary={
-          'Security: ' +
-          networkSecurityMode(network) +
-          ', Ch: ' +
-          network.channel +
-          ', bssid: ' +
-          network.bssid
-        }
-      />
-      <ListItemIcon>
-        <Badge badgeContent={network.rssi + 'dBm'}>
-          <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
-        </Badge>
-      </ListItemIcon>
-    </ListItem>
+  const renderNetwork = useCallback(
+    (network: WiFiNetwork) => (
+      <ListItem
+        key={network.bssid}
+        onClick={() => wifiConnectionContext.selectNetwork(network)}
+      >
+        <ListItemAvatar>
+          <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
+        </ListItemAvatar>
+        <ListItemText
+          primary={network.ssid}
+          secondary={
+            'Security: ' +
+            networkSecurityMode(network) +
+            ', Ch: ' +
+            network.channel +
+            ', bssid: ' +
+            network.bssid
+          }
+        />
+        <ListItemIcon>
+          <Badge badgeContent={network.rssi + 'dBm'}>
+            <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
+          </Badge>
+        </ListItemIcon>
+      </ListItem>
+    ),
+    [wifiConnectionContext, theme]
   );
 
   if (networkList.networks.length === 0) {
@@ -97,4 +100,4 @@ const WiFiNetworkSelector = ({ networkList }: { networkList: WiFiNetworkList })
   return <List>{networkList.networks.map(renderNetwork)}</List>;
 };
 
-export default WiFiNetworkSelector;
+export default memo(WiFiNetworkSelector);