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,7 +116,8 @@ export default function SettingsAdvancedRoute() {
     [send, setDeveloperMode],
   );
 
-  const handleDevChannelChange = (enabled: boolean) => {
+  const handleDevChannelChange = useCallback(
+    (enabled: boolean) => {
       send("setDevChannelState", { enabled }, resp => {
         if ("error" in resp) {
           notifications.error(
@@ -126,19 +127,12 @@ export default function SettingsAdvancedRoute() {
         }
         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) {
-      setShowLoopbackWarning(true);
-    } else {
-      // If disabling, just proceed
-      applyLoopbackOnlyMode(false);
-    }
-  };
-
-  const applyLoopbackOnlyMode = (enabled: boolean) => {
       send("setLocalLoopbackOnly", { enabled }, resp => {
         if ("error" in resp) {
           notifications.error(
@@ -157,12 +151,27 @@ export default function SettingsAdvancedRoute() {
           );
         }
       });
-  };
+    },
+    [send, setLocalLoopbackOnly],
+  );
 
-  const confirmLoopbackModeEnable = () => {
+  const handleLoopbackOnlyModeChange = useCallback(
+    (enabled: boolean) => {
+      // If trying to enable loopback-only mode, show warning first
+      if (enabled) {
+        setShowLoopbackWarning(true);
+      } else {
+        // If disabling, just proceed
+        applyLoopbackOnlyMode(false);
+      }
+    },
+    [applyLoopbackOnlyMode, setShowLoopbackWarning],
+  );
+
+  const confirmLoopbackModeEnable = useCallback(() => {
     applyLoopbackOnlyMode(true);
     setShowLoopbackWarning(false);
-  };
+  }, [applyLoopbackOnlyMode, setShowLoopbackWarning]);
 
   return (
     <div className="space-y-4">