From 306297e7f498b06f139a4b1bc3b19b13a902b3e0 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Fri, 5 Sep 2025 18:42:23 -0400
Subject: [PATCH] Optimize re-render issue on secrets page

---
 frontend/src/hooks/api/migration/queries.tsx  |  4 ++-
 .../components/VaultPlatformModal.tsx         |  2 +-
 .../components/SecretListView/SecretItem.tsx  |  6 ++--
 .../SecretListView/SecretListView.tsx         | 35 ++++++++++---------
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/src/hooks/api/migration/queries.tsx b/frontend/src/hooks/api/migration/queries.tsx
index 2279b0eea..e96533b09 100644
--- a/frontend/src/hooks/api/migration/queries.tsx
+++ b/frontend/src/hooks/api/migration/queries.tsx
@@ -1,5 +1,7 @@
-import { apiRequest } from "@app/config/request";
 import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
 import { ExternalMigrationProviders } from "./types";
 
 const externalMigrationQueryKeys = {
diff --git a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx
index 95ed993e8..e6f142644 100644
--- a/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/ExternalMigrationsTab/components/VaultPlatformModal.tsx
@@ -15,8 +15,8 @@ import {
   OrgPermissionSubjects
 } from "@app/context/OrgPermissionContext/types";
 import { gatewaysQueryKeys } from "@app/hooks/api";
-import { useImportVault } from "@app/hooks/api/migration/mutations";
 import { useHasCustomMigrationAvailable } from "@app/hooks/api/migration";
+import { useImportVault } from "@app/hooks/api/migration/mutations";
 import { ExternalMigrationProviders } from "@app/hooks/api/migration/types";
 
 type Props = {
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
index 2a4f54c82..31cf18a65 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx
@@ -75,7 +75,7 @@ type Props = {
   onCreateTag: () => void;
   environment: string;
   secretPath: string;
-  handleSecretShare: () => void;
+  onShareSecret: (sec: SecretV3RawSanitized) => void;
   importedBy?: {
     environment: { name: string; slug: string };
     folders: {
@@ -102,7 +102,7 @@ export const SecretItem = memo(
     onToggleSecretSelect,
     environment,
     secretPath,
-    handleSecretShare,
+    onShareSecret,
     importedBy,
     isPending,
     pendingAction,
@@ -682,7 +682,7 @@ export const SecretItem = memo(
                       variant="plain"
                       size="md"
                       ariaLabel="share-secret"
-                      onClick={handleSecretShare}
+                      onClick={() => onShareSecret(secret)}
                     >
                       <Tooltip content="Share Secret">
                         <FontAwesomeSymbol
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx
index a0966bc5d..b98ce31b0 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
 
@@ -100,6 +100,11 @@ export const SecretListView = ({
   });
   const { addPendingChange } = useBatchModeActions();
 
+  const pendingChangesRef = useRef(pendingChanges);
+  useEffect(() => {
+    pendingChangesRef.current = pendingChanges;
+  }, [pendingChanges]);
+
   const handleSecretOperation = async (
     operation: "create" | "update" | "delete",
     type: SecretType,
@@ -337,7 +342,10 @@ export const SecretListView = ({
                 secretPath
               });
             } else {
-              const trueOriginalSecret = getTrueOriginalSecret(orgSecret, pendingChanges.secrets);
+              const trueOriginalSecret = getTrueOriginalSecret(
+                orgSecret,
+                pendingChangesRef.current.secrets
+              );
 
               const updateChange: PendingSecretUpdate = {
                 id: orgSecret.id,
@@ -442,15 +450,7 @@ export const SecretListView = ({
         });
       }
     },
-    [
-      environment,
-      secretPath,
-      isProtectedBranch,
-      isBatchMode,
-      workspaceId,
-      addPendingChange,
-      pendingChanges.secrets
-    ]
+    [environment, secretPath, isProtectedBranch, isBatchMode, workspaceId, addPendingChange]
   );
 
   const handleSecretDelete = useCallback(async () => {
@@ -535,6 +535,13 @@ export const SecretListView = ({
     (sec: SecretV3RawSanitized) => handlePopUpOpen("secretDetail", sec),
     []
   );
+  const onShareSecret = useCallback(
+    (sec: SecretV3RawSanitized) =>
+      handlePopUpOpen("createSharedSecret", {
+        value: sec.valueOverride ?? sec.value
+      }),
+    []
+  );
 
   return (
     <>
@@ -557,11 +564,7 @@ export const SecretListView = ({
           onDetailViewSecret={onDetailViewSecret}
           importedBy={importedBy}
           onCreateTag={onCreateTag}
-          handleSecretShare={() =>
-            handlePopUpOpen("createSharedSecret", {
-              value: secret.valueOverride ?? secret.value
-            })
-          }
+          onShareSecret={onShareSecret}
           isPending={secret.isPending}
           pendingAction={secret.pendingAction}
         />