From 524a97e9a6514c69103bba1e88ab0c71a79ddb0a Mon Sep 17 00:00:00 2001
From: = <akhilmhdh@gmail.com>
Date: Mon, 30 Dec 2024 19:38:11 +0530
Subject: [PATCH] fix: resolved infinite rendering issue caused by zustand

---
 .../SecretMainPage.store.tsx                  | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx
index 6a8746d18..0e4ecca95 100644
--- a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx
@@ -1,6 +1,7 @@
 import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
 import { useRouter } from "@tanstack/react-router";
 import { createStore, StateCreator, StoreApi, useStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
 
 import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 
@@ -60,14 +61,13 @@ const createPopUpStore: StateCreator<PopUpState> = (set) => ({
 type CombinedState = SelectedSecretState & PopUpState;
 const StoreContext = createContext<StoreApi<CombinedState> | null>(null);
 export const StoreProvider = ({ children }: { children: ReactNode }) => {
-  const storeRef = useRef<StoreApi<CombinedState>>();
-  const router = useRouter();
-  if (!storeRef.current) {
-    storeRef.current = createStore<CombinedState>((...a) => ({
+  const storeRef = useRef<StoreApi<CombinedState>>(
+    createStore<CombinedState>((...a) => ({
       ...createSelectedSecretStore(...a),
       ...createPopUpStore(...a)
-    }));
-  }
+    }))
+  );
+  const router = useRouter();
 
   useEffect(() => {
     const onRouteChangeStart = () => {
@@ -91,10 +91,11 @@ const useStoreContext = <T extends object>(selector: (state: CombinedState) => T
 };
 
 // selected secret context
-export const useSelectedSecrets = () => useStoreContext((state) => state.selectedSecret);
-export const useSelectedSecretActions = () => useStoreContext((state) => state.action);
+export const useSelectedSecrets = () =>
+  useStoreContext(useShallow((state) => state.selectedSecret));
+export const useSelectedSecretActions = () => useStoreContext(useShallow((state) => state.action));
 
 // popup context
 export const usePopUpState = (id: PopUpNames) =>
-  useStoreContext((state) => state.popUp?.[id] || { isOpen: false });
-export const usePopUpAction = () => useStoreContext((state) => state.popUpActions);
+  useStoreContext(useShallow((state) => state.popUp?.[id] || { isOpen: false }));
+export const usePopUpAction = () => useStoreContext(useShallow((state) => state.popUpActions));