Optimize settings sidebar nav rerenders

apps/web/src/components/settings/SettingsSidebarNav.items.ts

@@ -0,0 +1,32 @@
+import {
+  ArchiveIcon,
+  BotIcon,
+  GitBranchIcon,
+  KeyboardIcon,
+  Link2Icon,
+  Settings2Icon,
+} from "lucide-react";
+import type { ComponentType } from "react";
+
+export type SettingsSectionPath =
+  | "/settings/general"
+  | "/settings/keybindings"
+  | "/settings/providers"
+  | "/settings/source-control"
+  | "/settings/connections"
+  | "/settings/archived";
+
+export interface SettingsNavItem {
+  readonly icon: ComponentType<{ className?: string }>;
+  readonly label: string;
+  readonly to: SettingsSectionPath;
+}
+
+export const SETTINGS_NAV_ITEMS: ReadonlyArray<SettingsNavItem> = [
+  { label: "General", to: "/settings/general", icon: Settings2Icon },
+  { label: "Keybindings", to: "/settings/keybindings", icon: KeyboardIcon },
+  { label: "Providers", to: "/settings/providers", icon: BotIcon },
+  { label: "Source Control", to: "/settings/source-control", icon: GitBranchIcon },
+  { label: "Connections", to: "/settings/connections", icon: Link2Icon },
+  { label: "Archive", to: "/settings/archived", icon: ArchiveIcon },
+];

apps/web/src/components/settings/SettingsSidebarNav.tsx

@@ -1,13 +1,5 @@
-import { useCallback, type ComponentType } from "react";
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  BotIcon,
-  GitBranchIcon,
-  KeyboardIcon,
-  Link2Icon,
-  Settings2Icon,
-} from "lucide-react";
+import { useCallback } from "react";
+import { ArrowLeftIcon } from "lucide-react";
 import { useCanGoBack, useNavigate } from "@tanstack/react-router";
 
 import {
@@ -20,27 +12,8 @@ import {
   SidebarSeparator,
   useSidebar,
 } from "../ui/sidebar";
-
-export type SettingsSectionPath =
-  | "/settings/general"
-  | "/settings/keybindings"
-  | "/settings/providers"
-  | "/settings/source-control"
-  | "/settings/connections"
-  | "/settings/archived";
-
-export const SETTINGS_NAV_ITEMS: ReadonlyArray<{
-  label: string;
-  to: SettingsSectionPath;
-  icon: ComponentType<{ className?: string }>;
-}> = [
-  { label: "General", to: "/settings/general", icon: Settings2Icon },
-  { label: "Keybindings", to: "/settings/keybindings", icon: KeyboardIcon },
-  { label: "Providers", to: "/settings/providers", icon: BotIcon },
-  { label: "Source Control", to: "/settings/source-control", icon: GitBranchIcon },
-  { label: "Connections", to: "/settings/connections", icon: Link2Icon },
-  { label: "Archive", to: "/settings/archived", icon: ArchiveIcon },
-];
+import { SETTINGS_NAV_ITEMS, type SettingsSectionPath } from "./SettingsSidebarNav.items";
+import { SettingsSidebarNavItem } from "./SettingsSidebarNavItem";
 
 export function SettingsSidebarNav({ pathname }: { pathname: string }) {
   const navigate = useNavigate();
@@ -71,33 +44,14 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
       <SidebarContent className="overflow-x-hidden">
         <SidebarGroup className="px-2 py-3">
           <SidebarMenu>
-            {SETTINGS_NAV_ITEMS.map((item) => {
-              const Icon = item.icon;
-              const isActive = pathname === item.to;
-              return (
-                <SidebarMenuItem key={item.to}>
-                  <SidebarMenuButton
-                    size="sm"
-                    isActive={isActive}
-                    className={
-                      isActive
-                        ? "gap-2.5 px-2.5 py-2 text-left text-[13px] font-medium text-foreground"
-                        : "gap-2.5 px-2.5 py-2 text-left text-[13px] text-muted-foreground/70 hover:text-foreground/80"
-                    }
-                    onClick={() => handleSectionClick(item.to)}
-                  >
-                    <Icon
-                      className={
-                        isActive
-                          ? "size-4 shrink-0 text-foreground"
-                          : "size-4 shrink-0 text-muted-foreground/60"
-                      }
-                    />
-                    <span className="truncate">{item.label}</span>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              );
-            })}
+            {SETTINGS_NAV_ITEMS.map((item) => (
+              <SettingsSidebarNavItem
+                key={item.to}
+                item={item}
+                isActive={pathname === item.to}
+                onSelect={handleSectionClick}
+              />
+            ))}
           </SidebarMenu>
         </SidebarGroup>
       </SidebarContent>
@@ -108,7 +62,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
           <SidebarMenuItem>
             <SidebarMenuButton
               size="sm"
-              className="gap-2 px-2 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="gap-2 p-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
               onClick={handleBackClick}
             >
               <ArrowLeftIcon className="size-4" />

apps/web/src/components/settings/SettingsSidebarNavItem.tsx

@@ -0,0 +1,45 @@
+import { memo, useCallback } from "react";
+
+import { SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";
+import type { SettingsNavItem, SettingsSectionPath } from "./SettingsSidebarNav.items";
+
+interface SettingsSidebarNavItemProps {
+  readonly isActive: boolean;
+  readonly item: SettingsNavItem;
+  readonly onSelect: (to: SettingsSectionPath) => void;
+}
+
+export const SettingsSidebarNavItem = memo(function SettingsSidebarNavItem({
+  isActive,
+  item,
+  onSelect,
+}: SettingsSidebarNavItemProps) {
+  const Icon = item.icon;
+  const selectSettingsSection = useCallback(() => {
+    onSelect(item.to);
+  }, [item.to, onSelect]);
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        size="sm"
+        isActive={isActive}
+        className={
+          isActive
+            ? "gap-2.5 px-2.5 py-2 text-left text-[13px] font-medium text-foreground"
+            : "gap-2.5 px-2.5 py-2 text-left text-[13px] text-muted-foreground/70 hover:text-foreground/80"
+        }
+        onClick={selectSettingsSection}
+      >
+        <Icon
+          className={
+            isActive
+              ? "size-4 shrink-0 text-foreground"
+              : "size-4 shrink-0 text-muted-foreground/60"
+          }
+        />
+        <span className="truncate">{item.label}</span>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+});

docs/react-scan/settings-sidebar-nav/after-counts.json

@@ -0,0 +1,13 @@
+{
+  "Archive": 1,
+  "Bot": 3,
+  "GitBranch": 3,
+  "Keyboard": 3,
+  "Link2": 1,
+  "Settings2": 4,
+  "SettingsSidebarNav": 6,
+  "SettingsSidebarNavItem": 15,
+  "Sidebar": 6,
+  "SidebarMenuButton": 16,
+  "SidebarMenuItem": 16
+}

docs/react-scan/settings-sidebar-nav/before-counts.json

@@ -0,0 +1,12 @@
+{
+  "Archive": 6,
+  "Bot": 6,
+  "GitBranch": 6,
+  "Keyboard": 6,
+  "Link2": 6,
+  "Settings2": 6,
+  "SettingsSidebarNav": 6,
+  "Sidebar": 6,
+  "SidebarMenuButton": 37,
+  "SidebarMenuItem": 37
+}