refactor: optimize device settings handlers for better performance

- Refactored the `handleDevChannelChange` and `handleLoopbackOnlyModeChange` functions to use `useCallback` for improved performance and to prevent unnecessary re-renders.
- Consolidated the logic for applying loopback-only mode into a separate `applyLoopbackOnlyMode` function, enhancing code clarity and maintainability.
- Updated the confirmation flow for enabling loopback-only mode to ensure user warnings are displayed appropriately.

ui/src/routes/devices.$id.settings.advanced.tsx

@@ -116,53 +116,62 @@ export default function SettingsAdvancedRoute() {
     [send, setDeveloperMode],
   );
 
-  const handleDevChannelChange = (enabled: boolean) => {
+  const handleDevChannelChange = useCallback(
-    send("setDevChannelState", { enabled }, resp => {
+    (enabled: boolean) => {
-      if ("error" in resp) {
+      send("setDevChannelState", { enabled }, resp => {
-        notifications.error(
+        if ("error" in resp) {
-          `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
+          notifications.error(
-        );
+            `Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
-        return;
+          );
-      }
+          return;
-      setDevChannel(enabled);
+        }
-    });
+        setDevChannel(enabled);
-  };
+      });
+    },
+    [send, setDevChannel],
+  );
 
-  const handleLoopbackOnlyModeChange = (enabled: boolean) => {
+  const applyLoopbackOnlyMode = useCallback(
-    // If trying to enable loopback-only mode, show warning first
+    (enabled: boolean) => {
-    if (enabled) {
+      send("setLocalLoopbackOnly", { enabled }, resp => {
-      setShowLoopbackWarning(true);
+        if ("error" in resp) {
-    } else {
+          notifications.error(
-      // If disabling, just proceed
+            `Failed to ${enabled ? "enable" : "disable"} loopback-only mode: ${resp.error.data || "Unknown error"}`,
-      applyLoopbackOnlyMode(false);
+          );
-    }
+          return;
-  };
+        }
+        setLocalLoopbackOnly(enabled);
+        if (enabled) {
+          notifications.success(
+            "Loopback-only mode enabled. Restart your device to apply.",
+          );
+        } else {
+          notifications.success(
+            "Loopback-only mode disabled. Restart your device to apply.",
+          );
+        }
+      });
+    },
+    [send, setLocalLoopbackOnly],
+  );
 
-  const applyLoopbackOnlyMode = (enabled: boolean) => {
+  const handleLoopbackOnlyModeChange = useCallback(
-    send("setLocalLoopbackOnly", { enabled }, resp => {
+    (enabled: boolean) => {
-      if ("error" in resp) {
+      // If trying to enable loopback-only mode, show warning first
-        notifications.error(
-          `Failed to ${enabled ? "enable" : "disable"} loopback-only mode: ${resp.error.data || "Unknown error"}`,
-        );
-        return;
-      }
-      setLocalLoopbackOnly(enabled);
       if (enabled) {
-        notifications.success(
+        setShowLoopbackWarning(true);
-          "Loopback-only mode enabled. Restart your device to apply.",
-        );
       } else {
-        notifications.success(
+        // If disabling, just proceed
-          "Loopback-only mode disabled. Restart your device to apply.",
+        applyLoopbackOnlyMode(false);
-        );
       }
-    });
+    },
-  };
+    [applyLoopbackOnlyMode, setShowLoopbackWarning],
+  );
 
-  const confirmLoopbackModeEnable = () => {
+  const confirmLoopbackModeEnable = useCallback(() => {
     applyLoopbackOnlyMode(true);
     setShowLoopbackWarning(false);
-  };
+  }, [applyLoopbackOnlyMode, setShowLoopbackWarning]);
 
   return (
     <div className="space-y-4">