From c07fb36f043221671eb56df3256e895a8442b2f9 Mon Sep 17 00:00:00 2001
From: Alex Goodkind <alex@goodkind.io>
Date: Mon, 26 May 2025 05:02:44 +0000
Subject: [PATCH] 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.
---
 .../routes/devices.$id.settings.advanced.tsx  | 87 ++++++++++---------
 1 file changed, 48 insertions(+), 39 deletions(-)

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