From 9711d13804c778c05907475964fba5ec95cb8a27 Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Fri, 11 Jul 2025 01:38:54 +0800
Subject: [PATCH] refactor: optimize user fetching logic in UsersPageClient
 component by using useCallback for fetchUsers function

---
 src/components/admin/users-page.tsx | 56 ++++++++++++++---------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/admin/users-page.tsx b/src/components/admin/users-page.tsx
index 6704d5f..23fb7d3 100644
--- a/src/components/admin/users-page.tsx
+++ b/src/components/admin/users-page.tsx
@@ -6,7 +6,7 @@ import type { User } from '@/lib/auth-types';
 import { useUsersStore } from '@/stores/users-store';
 import type { SortingState } from '@tanstack/react-table';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 
 export function UsersPageClient() {
@@ -22,39 +22,39 @@ export function UsersPageClient() {
   ]);
   const refreshTrigger = useUsersStore((state) => state.refreshTrigger);
 
-  useEffect(() => {
-    const fetchUsers = async () => {
-      try {
-        setLoading(true);
-        const result = await getUsersAction({
-          pageIndex,
-          pageSize,
-          search,
-          sorting,
-        });
+  const fetchUsers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const result = await getUsersAction({
+        pageIndex,
+        pageSize,
+        search,
+        sorting,
+      });
 
-        if (result?.data?.success) {
-          setData(result.data.data?.items || []);
-          setTotal(result.data.data?.total || 0);
-        } else {
-          const errorMessage = result?.data?.error || t('error');
-          toast.error(errorMessage);
-          setData([]);
-          setTotal(0);
-        }
-      } catch (error) {
-        console.error('Failed to fetch users:', error);
-        toast.error(t('error'));
+      if (result?.data?.success) {
+        setData(result.data.data?.items || []);
+        setTotal(result.data.data?.total || 0);
+      } else {
+        const errorMessage = result?.data?.error || t('error');
+        toast.error(errorMessage);
         setData([]);
         setTotal(0);
-      } finally {
-        setLoading(false);
       }
-    };
-
-    fetchUsers();
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      toast.error(t('error'));
+      setData([]);
+      setTotal(0);
+    } finally {
+      setLoading(false);
+    }
   }, [pageIndex, pageSize, search, sorting, refreshTrigger]);
 
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
   return (
     <>
       <UsersTable