diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 2f2b841..0ba13e6 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -56,14 +56,30 @@ function Carousel({
     },
     plugins
   )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
 
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      if (!api) return () => {}
+      api.on("reInit", callback)
+      api.on("select", callback)
+      return () => {
+        api.off("reInit", callback)
+        api.off("select", callback)
+      }
+    },
+    [api]
+  )
+
+  const canScrollPrev = React.useSyncExternalStore(
+    subscribe,
+    () => api?.canScrollPrev() ?? false,
+    () => false
+  )
+  const canScrollNext = React.useSyncExternalStore(
+    subscribe,
+    () => api?.canScrollNext() ?? false,
+    () => false
+  )
 
   const scrollPrev = React.useCallback(() => {
     api?.scrollPrev()
@@ -91,17 +107,6 @@ function Carousel({
     setApi(api)
   }, [api, setApi])
 
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
-
-    return () => {
-      api?.off("select", onSelect)
-    }
-  }, [api, onSelect])
-
   return (
     <CarouselContext.Provider
       value={{
diff --git a/src/components/ui/multi-select.tsx b/src/components/ui/multi-select.tsx
index e5933a1..6ce374f 100644
--- a/src/components/ui/multi-select.tsx
+++ b/src/components/ui/multi-select.tsx
@@ -276,24 +276,23 @@ const MultipleSelector = ({
     }
   }, [open])
 
-  useEffect(() => {
+  const [lastValue, setLastValue] = React.useState(value)
+  if (value !== lastValue) {
+    setLastValue(value)
     if (value) {
       setSelected(value)
     }
-  }, [value])
-
-  useEffect(() => {
-    /** If `onSearch` is provided, do not trigger options updated. */
-    if (!arrayOptions || onSearch) {
-      return
-    }
-
-    const newOption = transToGroupOption(arrayOptions || [], groupBy)
+  }
 
-    if (JSON.stringify(newOption) !== JSON.stringify(options)) {
-      setOptions(newOption)
-    }
-  }, [arrayDefaultOptions, arrayOptions, groupBy, onSearch, options])
+  const incomingOptions = !arrayOptions || onSearch
+    ? null
+    : transToGroupOption(arrayOptions, groupBy)
+  const incomingOptionsKey = incomingOptions ? JSON.stringify(incomingOptions) : null
+  const [lastOptionsKey, setLastOptionsKey] = React.useState<string | null>(null)
+  if (incomingOptions && incomingOptionsKey !== lastOptionsKey) {
+    setLastOptionsKey(incomingOptionsKey)
+    setOptions(incomingOptions)
+  }
 
   useEffect(() => {
     /** sync search */
@@ -414,7 +413,7 @@ const MultipleSelector = ({
   const selectables = React.useMemo<GroupOption>(() => removePickedOption(options, selected), [options, selected])
 
   /** Avoid Creatable Selector freezing or lagging when paste a long string. */
-  const commandFilter = React.useCallback(() => {
+  const commandFilter = () => {
     if (commandProps?.filter) {
       return commandProps.filter
     }
@@ -425,9 +424,8 @@ const MultipleSelector = ({
       }
     }
 
-    // Using default filter in `cmdk`. We don&lsquo;t have to provide it.
     return undefined
-  }, [creatable, commandProps?.filter])
+  }
 
   return (
     <Command
diff --git a/src/hooks/use-mobile.ts b/src/hooks/use-mobile.ts
index 2b0fe1d..64eaff6 100644
--- a/src/hooks/use-mobile.ts
+++ b/src/hooks/use-mobile.ts
@@ -2,18 +2,20 @@ import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
 
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+  mql.addEventListener("change", callback)
+  return () => mql.removeEventListener("change", callback)
+}
+
+function getSnapshot() {
+  return window.innerWidth < MOBILE_BREAKPOINT
+}
 
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+function getServerSnapshot() {
+  return false
+}
 
-  return !!isMobile
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }
diff --git a/src/layouts/panel/sidebar/cluster/index.tsx b/src/layouts/panel/sidebar/cluster/index.tsx
index 19bc881..cdb32e5 100644
--- a/src/layouts/panel/sidebar/cluster/index.tsx
+++ b/src/layouts/panel/sidebar/cluster/index.tsx
@@ -30,7 +30,7 @@ import {CLUSTER_ICON_LIST} from "./icon-list";
 import ClusterAddDialog from "./add-dialog.tsx";
 import SidebarClusterStatus from "./status.tsx";
 import SidebarClusterLoader from "./loader.tsx";
-import clusterStore, {useClusterActions} from "@/store/cluster-store.ts";
+import {useClusterActions, useClusterId} from "@/store/cluster-store.ts";
 import {useRouter} from "@/routes/hooks";
 import SidebarClusterSettings
   from "@/layouts/panel/sidebar/cluster/settings.tsx";
@@ -45,23 +45,23 @@ export function SidebarClusterSwitcher() {
   const {t} = useTranslation();
   const {isMobile} = useSidebar()
   const {clusters, setClusters, loading} = useClusters();
-  const [activeCluster, setActiveCluster] = React.useState<Cluster | null>(null);
   const [clickedCluster, setClickedCluster] = React.useState<Cluster | null>(null);
   const [open, setOpen] = React.useState(false);
   const [dialogMode, setDialogMode] = React.useState("add");
   const {setClusterId} = useClusterActions();
+  const clusterId = useClusterId();
   const {replace} = useRouter();
 
+  const activeCluster: Cluster | null = clusters && clusters.length > 0
+    ? (clusters.find(c => c.id === clusterId) ?? clusters[0])
+    : null;
+
   React.useEffect(() => {
     if (clusters && clusters.length > 0) {
-      const selectedClusterId = clusterStore.getState().clusterId;
-      const match = selectedClusterId ? clusters.find(c => c.id === selectedClusterId) : null;
-      if (match) {
-        setActiveCluster(match);
-        return;
+      const stored = clusterId ? clusters.find(c => c.id === clusterId) : null;
+      if (!stored) {
+        setClusterId(clusters[0].id);
       }
-      setActiveCluster(clusters[0]);
-      setClusterId(clusters[0].id);
       return;
     }
     if (!loading && (!clusters || clusters.length === 0)) {
@@ -74,9 +74,8 @@ export function SidebarClusterSwitcher() {
         window.location.reload();
       })();
     }
-  }, [clusters, loading, replace, setClusters, setClusterId]);
+  }, [clusters, clusterId, loading, replace, setClusters, setClusterId]);
   const updateCluster = (cluster: Cluster) => {
-    setActiveCluster(cluster);
     setClusterId(cluster.id);
     replace("/overview/");
   };
diff --git a/src/pages/authentication/login/index.tsx b/src/pages/authentication/login/index.tsx
index c942b51..e7ad721 100644
--- a/src/pages/authentication/login/index.tsx
+++ b/src/pages/authentication/login/index.tsx
@@ -50,13 +50,12 @@ export default function LoginForm() {
   const [otp, setOtp] = useState("")
   const [recoveryOpen, setRecoveryOpen] = useState(false)
   const [recoveryCode, setRecoveryCode] = useState("")
-  const [rememberMe, setRememberMe] = useState(false)
+  const [rememberMe, setRememberMe] = useState(() => !!localStorage.getItem("remembered_email"))
 
   useEffect(() => {
     const rememberedEmail = localStorage.getItem("remembered_email")
     if (rememberedEmail) {
       form.setValue("email", rememberedEmail)
-      setRememberMe(true)
       setTimeout(() => setFocus("password"), 0)
     } else {
       setTimeout(() => setFocus("email"), 0)
@@ -89,7 +88,7 @@ export default function LoginForm() {
     }
   }
 
-  const handleOtpSubmit = useCallback(async () => {
+  const handleOtpSubmit = useCallback(async (code: string) => {
     const { email, password } = getValues()
     if (!email || !password) return
 
@@ -98,7 +97,7 @@ export default function LoginForm() {
       const response = await login({
         email,
         password,
-        multi_factor_code: otp,
+        multi_factor_code: code,
       })
 
       setOtp("")
@@ -110,9 +109,9 @@ export default function LoginForm() {
     } finally {
       setLoading(false)
     }
-  }, [getValues, login, navigate, otp, t])
+  }, [getValues, login, navigate, t])
 
-  const handleRecoverySubmit = useCallback(async () => {
+  const handleRecoverySubmit = useCallback(async (code: string) => {
     const { email, password } = getValues()
     if (!email || !password) return
 
@@ -121,7 +120,7 @@ export default function LoginForm() {
       const response = await login({
         email,
         password,
-        multi_factor_code: recoveryCode,
+        multi_factor_code: code,
       })
 
       if (response.success) {
@@ -132,15 +131,17 @@ export default function LoginForm() {
     } finally {
       setLoading(false)
     }
-  }, [getValues, login, navigate, recoveryCode, t])
+  }, [getValues, login, navigate, t])
 
-  useEffect(() => {
-    if (otp.length === 6 && !loading) handleOtpSubmit()
-  }, [otp, loading, handleOtpSubmit])
+  const handleOtpChange = (value: string) => {
+    setOtp(value)
+    if (value.length === 6 && !loading) handleOtpSubmit(value)
+  }
 
-  useEffect(() => {
-    if (recoveryCode.length === 16 && !loading) handleRecoverySubmit()
-  }, [recoveryCode, loading, handleRecoverySubmit])
+  const handleRecoveryChange = (value: string) => {
+    setRecoveryCode(value)
+    if (value.length === 16 && !loading) handleRecoverySubmit(value)
+  }
 
   if (token.authentication_token) {
     return <Navigate to="/cluster/" replace />
@@ -248,7 +249,7 @@ export default function LoginForm() {
           </DialogHeader>
 
           <div className="flex justify-center my-4">
-            <InputOTP maxLength={6} value={otp} onChange={setOtp}>
+            <InputOTP maxLength={6} value={otp} onChange={handleOtpChange}>
               <InputOTPGroup>
                 {[0, 1, 2].map((i) => (
                   <InputOTPSlot key={i} index={i} />
@@ -263,7 +264,7 @@ export default function LoginForm() {
           </div>
 
           <DialogFooter>
-            <Button onClick={handleOtpSubmit} disabled={loading}>
+            <Button onClick={() => handleOtpSubmit(otp)} disabled={loading}>
               {t("authentication.login.otp.submit")}
             </Button>
           </DialogFooter>
@@ -284,7 +285,7 @@ export default function LoginForm() {
           <InputOTP
             maxLength={16}
             value={recoveryCode}
-            onChange={setRecoveryCode}
+            onChange={handleRecoveryChange}
           >
             {[0, 4, 8, 12].map((start) => (
               <InputOTPGroup key={start}>
@@ -297,7 +298,7 @@ export default function LoginForm() {
 
           <DialogFooter>
             <Button
-              onClick={handleRecoverySubmit}
+              onClick={() => handleRecoverySubmit(recoveryCode)}
               disabled={loading || recoveryCode.length !== 16}
             >
               {t("authentication.login.recovery.confirm")}
diff --git a/src/pages/panel/apps/index.tsx b/src/pages/panel/apps/index.tsx
index 37e8c4a..b9c0d1a 100644
--- a/src/pages/panel/apps/index.tsx
+++ b/src/pages/panel/apps/index.tsx
@@ -37,6 +37,56 @@ import {usePagination} from '@/hooks/use-pagination'
 import {AppInstallDialog} from "@/pages/panel/apps/install-dialog.tsx";
 import {useTranslation} from "react-i18next";
 
+const FilterSkeleton = () => (
+  <Card className="h-full">
+    <CardHeader>
+      <Skeleton className="h-6 w-24" />
+    </CardHeader>
+    <CardContent className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-12" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+      <Separator />
+      <div className="space-y-2 h-32">
+        <Skeleton className="h-4 w-32" />
+        <div className="space-y-2">
+          {[1, 2, 3].map(i => (
+            <div key={i} className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-4 w-4" />
+                <Skeleton className="h-4 w-24" />
+              </div>
+              <Skeleton className="h-5 w-8" />
+            </div>
+          ))}
+        </div>
+      </div>
+      <Separator />
+      <div className="space-y-2 h-64">
+        <Skeleton className="h-4 w-32" />
+        <div className="space-y-2">
+          {[1, 2, 3, 4, 5].map(i => (
+            <div key={i} className="flex items-center gap-2">
+              <Skeleton className="h-4 w-4" />
+              <Skeleton className="h-4 w-20" />
+            </div>
+          ))}
+        </div>
+      </div>
+      <Separator />
+      <div className="space-y-2">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-4 w-4" />
+            <Skeleton className="h-4 w-20" />
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+)
+
 export default function AppsPage() {
   const { t } = useTranslation();
   const [apps, setApps] = useState<App[]>([])
@@ -123,9 +173,12 @@ export default function AppsPage() {
     paginationItemsToDisplay: 5
   })
 
-  useEffect(() => {
+  const filterKey = `${searchQuery}|${selectedRepositories.join(",")}|${selectedKeywords.join(",")}|${showInstalledOnly}|${itemsPerPage}`
+  const [lastFilterKey, setLastFilterKey] = useState(filterKey)
+  if (lastFilterKey !== filterKey) {
+    setLastFilterKey(filterKey)
     setCurrentPage(1)
-  }, [searchQuery, selectedRepositories, selectedKeywords, showInstalledOnly, itemsPerPage])
+  }
 
   const toggleRepository = (repo: string) => {
     setSelectedRepositories(prev =>
@@ -194,56 +247,6 @@ export default function AppsPage() {
     </Card>
   )
 
-  const FilterSkeleton = () => (
-    <Card className="h-full">
-      <CardHeader>
-        <Skeleton className="h-6 w-24" />
-      </CardHeader>
-      <CardContent className="space-y-6">
-        <div className="space-y-2">
-          <Skeleton className="h-4 w-12" />
-          <Skeleton className="h-10 w-full" />
-        </div>
-        <Separator />
-        <div className="space-y-2 h-32">
-          <Skeleton className="h-4 w-32" />
-          <div className="space-y-2">
-            {[1, 2, 3].map(i => (
-              <div key={i} className="flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <Skeleton className="h-4 w-4" />
-                  <Skeleton className="h-4 w-24" />
-                </div>
-                <Skeleton className="h-5 w-8" />
-              </div>
-            ))}
-          </div>
-        </div>
-        <Separator />
-        <div className="space-y-2 h-64">
-          <Skeleton className="h-4 w-32" />
-          <div className="space-y-2">
-            {[1, 2, 3, 4, 5].map(i => (
-              <div key={i} className="flex items-center gap-2">
-                <Skeleton className="h-4 w-4" />
-                <Skeleton className="h-4 w-20" />
-              </div>
-            ))}
-          </div>
-        </div>
-        <Separator />
-        <div className="space-y-2">
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <Skeleton className="h-4 w-4" />
-              <Skeleton className="h-4 w-20" />
-            </div>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-
   return (
     <PanelPage title="panel.page.apps.title" layout={false}>
       <div className="w-[min(1800px,95%)] mx-auto flex flex-col flex-1 mt-[4vh]">
diff --git a/src/pages/panel/audits/index.tsx b/src/pages/panel/audits/index.tsx
index c355763..c4de7a7 100644
--- a/src/pages/panel/audits/index.tsx
+++ b/src/pages/panel/audits/index.tsx
@@ -61,19 +61,18 @@ export default function AuditPage() {
   const [sheetOpen, setSheetOpen] = useState(false);
   const [currentEntry, setCurrentEntry] = useState<AuditEntry>();
 
-  const loadAudit = async () => {
-    setIsLoading(true);
-    try {
-      const response = await auditService.find();
-      if (response.success) {
-        setAudit(response.audit);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
   useEffect(() => {
-    loadAudit();
+    let cancelled = false;
+    (async () => {
+      try {
+        const response = await auditService.find();
+        if (cancelled) return;
+        if (response.success) setAudit(response.audit);
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
   }, []);
 
   const pollForAudit = () => {
diff --git a/src/pages/panel/cron-job/edit/index.tsx b/src/pages/panel/cron-job/edit/index.tsx
index d4f62fb..58b8dcc 100644
--- a/src/pages/panel/cron-job/edit/index.tsx
+++ b/src/pages/panel/cron-job/edit/index.tsx
@@ -21,12 +21,12 @@ export default function CronJobEditPage() {
   const {theme} = useTheme();
   const [code, setCode] = useState("");
   const [loading, setLoading] = React.useState(false);
+  const [initialized, setInitialized] = useState(false);
 
-  React.useEffect(() => {
-    if (cronJob && code === "") {
-      setCode(cronJob.raw);
-    }
-  }, [cronJob, code]);
+  if (cronJob && !initialized) {
+    setInitialized(true);
+    setCode(cronJob.raw);
+  }
 
   async function save() {
     setLoading(true);
diff --git a/src/pages/panel/cron-job/header.tsx b/src/pages/panel/cron-job/header.tsx
index 5066a8f..ba97f0b 100644
--- a/src/pages/panel/cron-job/header.tsx
+++ b/src/pages/panel/cron-job/header.tsx
@@ -64,13 +64,14 @@ export default function CronJobPageHeader(
   const [actionsOpen, setActionsOpen] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [checked, setChecked] = useState<boolean>(true);
+  const [initialized, setInitialized] = useState(false);
   const [searchParams] = useSearchParams();
 
-  React.useEffect(() => {
-    if (cronJob) {
-      setChecked(!cronJob.suspend);
-    }
-  }, [cronJob]);
+  if (cronJob && !initialized) {
+    setInitialized(true);
+    setChecked(!cronJob.suspend);
+  }
+
   React.useEffect(() => {
     if (!cronJob) {
       return;
diff --git a/src/pages/panel/daemon-set/edit/index.tsx b/src/pages/panel/daemon-set/edit/index.tsx
index 322907f..0b9f5c4 100644
--- a/src/pages/panel/daemon-set/edit/index.tsx
+++ b/src/pages/panel/daemon-set/edit/index.tsx
@@ -21,12 +21,12 @@ export default function DaemonSetEditPage() {
   const {theme} = useTheme();
   const [code, setCode] = useState("");
   const [loading, setLoading] = React.useState(false);
+  const [initialized, setInitialized] = useState(false);
 
-  React.useEffect(() => {
-    if (daemonSet && code === "") {
-      setCode(daemonSet.raw);
-    }
-  }, [daemonSet, code]);
+  if (daemonSet && !initialized) {
+    setInitialized(true);
+    setCode(daemonSet.raw);
+  }
 
   async function save() {
     setLoading(true);
diff --git a/src/pages/panel/deployment/edit/index.tsx b/src/pages/panel/deployment/edit/index.tsx
index 40c5ccb..9796411 100644
--- a/src/pages/panel/deployment/edit/index.tsx
+++ b/src/pages/panel/deployment/edit/index.tsx
@@ -21,12 +21,12 @@ export default function DeploymentEditPage() {
   const {theme} = useTheme();
   const [code, setCode] = useState("");
   const [loading, setLoading] = React.useState(false);
+  const [initialized, setInitialized] = useState(false);
 
-  React.useEffect(() => {
-    if (deployment && code === "") {
-      setCode(deployment.raw);
-    }
-  }, [deployment, code]);
+  if (deployment && !initialized) {
+    setInitialized(true);
+    setCode(deployment.raw);
+  }
 
   async function save() {
     setLoading(true);
diff --git a/src/pages/panel/deployment/scale.tsx b/src/pages/panel/deployment/scale.tsx
index 9f4a370..c53db05 100644
--- a/src/pages/panel/deployment/scale.tsx
+++ b/src/pages/panel/deployment/scale.tsx
@@ -85,12 +85,10 @@ export function DeploymentScaleDrawer(
   const [nodes, setNodes] = useState<Node[] | null>(null);
   const [loadingNodes, setLoadingNodes] = useState(false);
 
-  useEffect(() => {
-    if (!initialized && deployment) {
-      setPods(deployment.replicas);
-      setInitialized(true);
-    }
-  }, [deployment, initialized]);
+  if (!initialized && deployment) {
+    setInitialized(true);
+    setPods(deployment.replicas);
+  }
 
   useEffect(() => {
     async function fetchNodes() {
diff --git a/src/pages/panel/replica-set/edit/index.tsx b/src/pages/panel/replica-set/edit/index.tsx
index 20ec1f0..8c8f809 100644
--- a/src/pages/panel/replica-set/edit/index.tsx
+++ b/src/pages/panel/replica-set/edit/index.tsx
@@ -21,12 +21,12 @@ export default function ReplicaSetEditPage() {
   const {theme} = useTheme();
   const [code, setCode] = useState("");
   const [loading, setLoading] = React.useState(false);
+  const [initialized, setInitialized] = useState(false);
 
-  React.useEffect(() => {
-    if (replicaSet && code === "") {
-      setCode(replicaSet.raw);
-    }
-  }, [replicaSet, code]);
+  if (replicaSet && !initialized) {
+    setInitialized(true);
+    setCode(replicaSet.raw);
+  }
 
   async function save() {
     setLoading(true);
diff --git a/src/pages/panel/stateful-set/edit/index.tsx b/src/pages/panel/stateful-set/edit/index.tsx
index 4f8e398..0dc1984 100644
--- a/src/pages/panel/stateful-set/edit/index.tsx
+++ b/src/pages/panel/stateful-set/edit/index.tsx
@@ -21,12 +21,12 @@ export default function StatefulSetEditPage() {
   const {theme} = useTheme();
   const [code, setCode] = useState("");
   const [loading, setLoading] = React.useState(false);
+  const [initialized, setInitialized] = useState(false);
 
-  React.useEffect(() => {
-    if (statefulSet && code === "") {
-      setCode(statefulSet.raw);
-    }
-  }, [statefulSet, code]);
+  if (statefulSet && !initialized) {
+    setInitialized(true);
+    setCode(statefulSet.raw);
+  }
 
   async function save() {
     setLoading(true);
diff --git a/src/pages/panel/stateful-set/scale.tsx b/src/pages/panel/stateful-set/scale.tsx
index 6b58db2..a6445af 100644
--- a/src/pages/panel/stateful-set/scale.tsx
+++ b/src/pages/panel/stateful-set/scale.tsx
@@ -85,12 +85,10 @@ export function StatefulSetScaleDrawer(
   const [nodes, setNodes] = useState<Node[] | null>(null);
   const [loadingNodes, setLoadingNodes] = useState(false);
 
-  useEffect(() => {
-    if (!initialized && statefulSet) {
-      setPods(statefulSet.replicas);
-      setInitialized(true);
-    }
-  }, [statefulSet, initialized]);
+  if (!initialized && statefulSet) {
+    setInitialized(true);
+    setPods(statefulSet.replicas);
+  }
 
   useEffect(() => {
     async function fetchNodes() {