From 67b29d10f6c56df9244fdb658cee1783d23c98ca Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 24 Apr 2026 05:42:26 +0700
Subject: [PATCH] chore(lint): hoist jsx-as-prop in desktop components

Memoize inline JSX passed as props across desktop-permissions-section,
desktop-updates-section, integrations-section, and pair-device-section
to satisfy react-perf/jsx-no-jsx-as-prop.
---
 .../desktop-permissions-section.tsx           | 38 +++++----
 .../components/desktop-updates-section.tsx    | 78 ++++++++++++-------
 .../components/integrations-section.tsx       | 64 ++++++++-------
 .../components/pair-device-section.tsx        | 36 ++++-----
 4 files changed, 128 insertions(+), 88 deletions(-)

diff --git a/packages/app/src/desktop/components/desktop-permissions-section.tsx b/packages/app/src/desktop/components/desktop-permissions-section.tsx
index 5662798e2..b9812ec30 100644
--- a/packages/app/src/desktop/components/desktop-permissions-section.tsx
+++ b/packages/app/src/desktop/components/desktop-permissions-section.tsx
@@ -43,26 +43,34 @@ export function DesktopPermissionsSection() {
     void sendTestNotification();
   }, [sendTestNotification]);
 
-  if (!isDesktopApp) {
-    return null;
-  }
-
   const isBusy = isRefreshing || requestingPermission !== null;
   const notificationsGranted = snapshot?.notifications.state === "granted";
 
-  const refreshButton = (
-    <Button
-      variant="ghost"
-      size="sm"
-      leftIcon={<RotateCw size={theme.iconSize.md} color={theme.colors.foregroundMuted} />}
-      onPress={handleRefreshPress}
-      disabled={isBusy}
-      accessibilityLabel="Refresh desktop permissions"
-    >
-      {isRefreshing ? "Refreshing..." : "Refresh"}
-    </Button>
+  const refreshIcon = useMemo(
+    () => <RotateCw size={theme.iconSize.md} color={theme.colors.foregroundMuted} />,
+    [theme.iconSize.md, theme.colors.foregroundMuted],
   );
 
+  const refreshButton = useMemo(
+    () => (
+      <Button
+        variant="ghost"
+        size="sm"
+        leftIcon={refreshIcon}
+        onPress={handleRefreshPress}
+        disabled={isBusy}
+        accessibilityLabel="Refresh desktop permissions"
+      >
+        {isRefreshing ? "Refreshing..." : "Refresh"}
+      </Button>
+    ),
+    [refreshIcon, handleRefreshPress, isBusy, isRefreshing],
+  );
+
+  if (!isDesktopApp) {
+    return null;
+  }
+
   return (
     <SettingsSection title="Permissions" trailing={refreshButton}>
       <View style={settingsStyles.card}>
diff --git a/packages/app/src/desktop/components/desktop-updates-section.tsx b/packages/app/src/desktop/components/desktop-updates-section.tsx
index ea83f0c44..6fc8a254b 100644
--- a/packages/app/src/desktop/components/desktop-updates-section.tsx
+++ b/packages/app/src/desktop/components/desktop-updates-section.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { ActivityIndicator, Alert, Text, View } from "react-native";
 import * as Clipboard from "expo-clipboard";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -247,24 +247,56 @@ export function LocalDaemonSection() {
   const handleCloseLogsModal = useCallback(() => setIsLogsModalOpen(false), []);
   const handleCloseCliStatusModal = useCallback(() => setIsCliStatusModalOpen(false), []);
 
+  const advancedSettingsIcon = useMemo(
+    () => <ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />,
+    [theme.iconSize.sm, theme.colors.foregroundMuted],
+  );
+  const playIcon = useMemo(
+    () => <Play size={theme.iconSize.sm} color={theme.colors.foreground} />,
+    [theme.iconSize.sm, theme.colors.foreground],
+  );
+  const pauseIcon = useMemo(
+    () => <Pause size={theme.iconSize.sm} color={theme.colors.foreground} />,
+    [theme.iconSize.sm, theme.colors.foreground],
+  );
+  const rotateIcon = useMemo(
+    () => <RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />,
+    [theme.iconSize.sm, theme.colors.foreground],
+  );
+  const copyIcon = useMemo(
+    () => <Copy size={theme.iconSize.sm} color={theme.colors.foreground} />,
+    [theme.iconSize.sm, theme.colors.foreground],
+  );
+  const fileTextIcon = useMemo(
+    () => <FileText size={theme.iconSize.sm} color={theme.colors.foreground} />,
+    [theme.iconSize.sm, theme.colors.foreground],
+  );
+  const activityIcon = useMemo(
+    () => <Activity size={theme.iconSize.sm} color={theme.colors.foreground} />,
+    [theme.iconSize.sm, theme.colors.foreground],
+  );
+
+  const advancedSettingsButton = useMemo(
+    () => (
+      <Button
+        variant="ghost"
+        size="sm"
+        leftIcon={advancedSettingsIcon}
+        textStyle={settingsStyles.sectionHeaderLinkText}
+        style={settingsStyles.sectionHeaderLink}
+        onPress={handleOpenAdvancedSettings}
+        accessibilityLabel="Open advanced daemon settings"
+      >
+        Advanced settings
+      </Button>
+    ),
+    [advancedSettingsIcon, handleOpenAdvancedSettings],
+  );
+
   if (!showSection) {
     return null;
   }
 
-  const advancedSettingsButton = (
-    <Button
-      variant="ghost"
-      size="sm"
-      leftIcon={<ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />}
-      textStyle={settingsStyles.sectionHeaderLinkText}
-      style={settingsStyles.sectionHeaderLink}
-      onPress={handleOpenAdvancedSettings}
-      accessibilityLabel="Open advanced daemon settings"
-    >
-      Advanced settings
-    </Button>
-  );
-
   return (
     <SettingsSection
       title="Daemon"
@@ -302,13 +334,7 @@ export function LocalDaemonSection() {
               <Button
                 variant="outline"
                 size="sm"
-                leftIcon={
-                  isDaemonManagementPaused ? (
-                    <Play size={theme.iconSize.sm} color={theme.colors.foreground} />
-                  ) : (
-                    <Pause size={theme.iconSize.sm} color={theme.colors.foreground} />
-                  )
-                }
+                leftIcon={isDaemonManagementPaused ? playIcon : pauseIcon}
                 onPress={handleToggleDaemonManagement}
                 disabled={isUpdatingDaemonManagement}
               >
@@ -330,7 +356,7 @@ export function LocalDaemonSection() {
               <Button
                 variant="outline"
                 size="sm"
-                leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                leftIcon={rotateIcon}
                 onPress={handleUpdateLocalDaemon}
                 disabled={isRestartingDaemon}
               >
@@ -353,7 +379,7 @@ export function LocalDaemonSection() {
                   <Button
                     variant="outline"
                     size="sm"
-                    leftIcon={<Copy size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                    leftIcon={copyIcon}
                     onPress={handleCopyLogPath}
                   >
                     Copy path
@@ -362,7 +388,7 @@ export function LocalDaemonSection() {
                 <Button
                   variant="outline"
                   size="sm"
-                  leftIcon={<FileText size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                  leftIcon={fileTextIcon}
                   onPress={handleOpenLogs}
                   disabled={!daemonLogs}
                 >
@@ -380,7 +406,7 @@ export function LocalDaemonSection() {
               <Button
                 variant="outline"
                 size="sm"
-                leftIcon={<Activity size={theme.iconSize.sm} color={theme.colors.foreground} />}
+                leftIcon={activityIcon}
                 onPress={handleRunCliStatus}
                 disabled={isLoadingCliStatus}
               >
diff --git a/packages/app/src/desktop/components/integrations-section.tsx b/packages/app/src/desktop/components/integrations-section.tsx
index f38e7f981..6a6853f35 100644
--- a/packages/app/src/desktop/components/integrations-section.tsx
+++ b/packages/app/src/desktop/components/integrations-section.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Text, View } from "react-native";
 import { useFocusEffect } from "@react-navigation/native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -85,37 +85,45 @@ export function IntegrationsSection() {
     void openExternalUrl(SKILLS_DOCS_URL);
   }, []);
 
+  const arrowIcon = useMemo(
+    () => <ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />,
+    [theme.iconSize.sm, theme.colors.foregroundMuted],
+  );
+
+  const trailing = useMemo(
+    () => (
+      <View style={styles.headerLinks}>
+        <Button
+          variant="ghost"
+          size="sm"
+          leftIcon={arrowIcon}
+          textStyle={settingsStyles.sectionHeaderLinkText}
+          style={settingsStyles.sectionHeaderLink}
+          onPress={handleOpenCliDocs}
+          accessibilityLabel="Open CLI documentation"
+        >
+          CLI docs
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          leftIcon={arrowIcon}
+          textStyle={settingsStyles.sectionHeaderLinkText}
+          style={settingsStyles.sectionHeaderLink}
+          onPress={handleOpenSkillsDocs}
+          accessibilityLabel="Open skills documentation"
+        >
+          Skills docs
+        </Button>
+      </View>
+    ),
+    [arrowIcon, handleOpenCliDocs, handleOpenSkillsDocs],
+  );
+
   if (!showSection) {
     return null;
   }
 
-  const trailing = (
-    <View style={styles.headerLinks}>
-      <Button
-        variant="ghost"
-        size="sm"
-        leftIcon={<ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />}
-        textStyle={settingsStyles.sectionHeaderLinkText}
-        style={settingsStyles.sectionHeaderLink}
-        onPress={handleOpenCliDocs}
-        accessibilityLabel="Open CLI documentation"
-      >
-        CLI docs
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
-        leftIcon={<ArrowUpRight size={theme.iconSize.sm} color={theme.colors.foregroundMuted} />}
-        textStyle={settingsStyles.sectionHeaderLinkText}
-        style={settingsStyles.sectionHeaderLink}
-        onPress={handleOpenSkillsDocs}
-        accessibilityLabel="Open skills documentation"
-      >
-        Skills docs
-      </Button>
-    </View>
-  );
-
   return (
     <SettingsSection title="Integrations" trailing={trailing}>
       <View style={settingsStyles.card}>
diff --git a/packages/app/src/desktop/components/pair-device-section.tsx b/packages/app/src/desktop/components/pair-device-section.tsx
index 5cacc0dd7..e098aa46d 100644
--- a/packages/app/src/desktop/components/pair-device-section.tsx
+++ b/packages/app/src/desktop/components/pair-device-section.tsx
@@ -55,6 +55,20 @@ export function PairDeviceSection() {
     [qrQuery.data],
   );
 
+  const retryIcon = useMemo(
+    () => <RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />,
+    [theme.iconSize.sm, theme.colors.foreground],
+  );
+  const copyButtonIcon = useMemo(
+    () =>
+      copied ? (
+        <Check size={theme.iconSize.sm} color={theme.colors.accent} />
+      ) : (
+        <Copy size={theme.iconSize.sm} color={theme.colors.foreground} />
+      ),
+    [copied, theme.iconSize.sm, theme.colors.accent, theme.colors.foreground],
+  );
+
   if (!showSection) return null;
 
   return (
@@ -72,12 +86,7 @@ export function PairDeviceSection() {
                 ? pairingQuery.error.message
                 : "Failed to load pairing offer."}
             </Text>
-            <Button
-              variant="outline"
-              size="sm"
-              leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
-              onPress={handleRefetch}
-            >
+            <Button variant="outline" size="sm" leftIcon={retryIcon} onPress={handleRefetch}>
               Retry
             </Button>
           </View>
@@ -88,12 +97,7 @@ export function PairDeviceSection() {
                 ? "Relay is not enabled. Enable relay to pair a device."
                 : "Pairing offer unavailable."}
             </Text>
-            <Button
-              variant="outline"
-              size="sm"
-              leftIcon={<RotateCw size={theme.iconSize.sm} color={theme.colors.foreground} />}
-              onPress={handleRefetch}
-            >
+            <Button variant="outline" size="sm" leftIcon={retryIcon} onPress={handleRefetch}>
               Retry
             </Button>
           </View>
@@ -124,13 +128,7 @@ export function PairDeviceSection() {
               <Button
                 variant="outline"
                 size="sm"
-                leftIcon={
-                  copied ? (
-                    <Check size={theme.iconSize.sm} color={theme.colors.accent} />
-                  ) : (
-                    <Copy size={theme.iconSize.sm} color={theme.colors.foreground} />
-                  )
-                }
+                leftIcon={copyButtonIcon}
                 onPress={handleCopyPress}
               >
                 {copied ? "Copied" : "Copy"}