From 4a868afecda7ec85a03dea7b19f8ce479e78c2af Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Wed, 5 Nov 2025 18:59:40 +0800
Subject: [PATCH] fix: plugin mgm page mistakely refreshed when open acc option
 menu

---
 web/src/app/home/layout.tsx       | 12 ++++++++----
 web/src/app/home/plugins/page.tsx |  3 ++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/app/home/layout.tsx b/web/src/app/home/layout.tsx
index d84eb6af..01f38657 100644
--- a/web/src/app/home/layout.tsx
+++ b/web/src/app/home/layout.tsx
@@ -3,7 +3,7 @@
 import styles from './layout.module.css';
 import HomeSidebar from '@/app/home/components/home-sidebar/HomeSidebar';
 import HomeTitleBar from '@/app/home/components/home-titlebar/HomeTitleBar';
-import React, { useState } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
 import { I18nObject } from '@/app/infra/entities/common';
 
@@ -18,11 +18,15 @@ export default function HomeLayout({
     en_US: '',
     zh_Hans: '',
   });
-  const onSelectedChangeAction = (child: SidebarChildVO) => {
+
+  const onSelectedChangeAction = useCallback((child: SidebarChildVO) => {
     setTitle(child.name);
     setSubtitle(child.description);
     setHelpLink(child.helpLink);
-  };
+  }, []);
+
+  // Memoize the main content area to prevent re-renders when sidebar state changes
+  const mainContent = useMemo(() => children, [children]);
 
   return (
     <div className={styles.homeLayoutContainer}>
@@ -33,7 +37,7 @@ export default function HomeLayout({
       <div className={styles.main}>
         <HomeTitleBar title={title} subtitle={subtitle} helpLink={helpLink} />
 
-        <main className={styles.mainContent}>{children}</main>
+        <main className={styles.mainContent}>{mainContent}</main>
       </div>
     </div>
   );
diff --git a/web/src/app/home/plugins/page.tsx b/web/src/app/home/plugins/page.tsx
index 37139aee..7958a784 100644
--- a/web/src/app/home/plugins/page.tsx
+++ b/web/src/app/home/plugins/page.tsx
@@ -121,7 +121,8 @@ export default function PluginConfigPage() {
     };
 
     fetchPluginSystemStatus();
-  }, [t]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   function formatFileSize(bytes: number): string {
     if (bytes === 0) return '0 Bytes';