@axzydev/axzy_ui_system 1.2.14 → 1.2.16

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/organisms/data-table/dataTable.tsx

@@ -87,42 +87,56 @@ export default function ITDataTable<T extends Record<string, unknown>>({
   } = useTableState({ defaultItemsPerPage });
 
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hasFetchedRef = useRef(false);
+  const fetchDataRef = useRef(fetchData);
+  fetchDataRef.current = fetchData;
+  const externalFiltersRef = useRef(externalFilters);
+  externalFiltersRef.current = externalFilters;
+
+  // Snapshot JSON para re-fetch solo cuando los valores cambian (no por nueva
+  // identidad del objeto que el padre pase en cada render).
+  const externalKey = JSON.stringify(externalFilters);
 
   const computedTotalPages = Math.ceil(totalItems / itemsPerPage) || 1;
 
   const performFetch = useCallback(async () => {
     setIsLoading(true);
     try {
-      const response = await fetchData({
+      const response = await fetchDataRef.current({
         page: currentPage,
         limit: itemsPerPage,
-        filters: { ...filters, ...externalFilters },
+        filters: { ...filters, ...externalFiltersRef.current },
         sort: sortConfig || undefined,
       });
       setData(response.data || []);
       setTotalItems(response.total || 0);
+      hasFetchedRef.current = true;
     } catch (error) {
       console.error("ITDataTable: Error fetching data", error);
       setData([]);
       setTotalItems(0);
+      hasFetchedRef.current = true;
     } finally {
       setIsLoading(false);
     }
-  }, [currentPage, itemsPerPage, filters, sortConfig, fetchData, externalFilters]);
+  }, [currentPage, itemsPerPage, filters, sortConfig]);
+
+  const performFetchRef = useRef(performFetch);
+  performFetchRef.current = performFetch;
 
   useEffect(() => {
-    if (!fetchOnMount && data.length === 0 && !isLoading) return;
+    if (!fetchOnMount && !hasFetchedRef.current) return;
 
     if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
 
     debounceTimerRef.current = setTimeout(() => {
-      performFetch();
+      performFetchRef.current();
     }, debounceMs);
 
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
     };
-  }, [currentPage, itemsPerPage, sortConfig, filters, externalFilters, reloadTrigger, fetchOnMount, performFetch, data.length, isLoading, debounceMs]);
+  }, [currentPage, itemsPerPage, sortConfig, filters, externalKey, reloadTrigger, fetchOnMount, debounceMs]);
 
   const renderFilterInput = (col: Column<T>) => {
     if (!col.filter) return null;