@ackplus/react-tanstack-data-table 1.1.12 → 1.1.13

package/src/lib/features/column-filter.feature.ts

@@ -379,9 +379,16 @@ function evaluateFilterCondition(columnValue: any, operator: string, filterValue
 
     // --- Date type logic ---
     if (type === 'date') {
-        const mCol = toMoment(columnValue);
-        const mFilter = toMoment(filterValue);
-        if (!mCol || !mFilter) return false;
+        if (operator === 'isEmpty') {
+            return columnValue === null || columnValue === undefined || columnValue === '';
+        }
+        if (operator === 'isNotEmpty') {
+            return columnValue !== null && columnValue !== undefined && columnValue !== '';
+        }
+
+        const mCol = columnValue ? toMoment(columnValue) : null;
+        const mFilter = filterValue ? toMoment(filterValue) : null;
+        if (!mCol || !mFilter || !mCol.isValid() || !mFilter.isValid()) return false;
         switch (operator) {
             case 'equals':
                 return mCol.isSame(mFilter, 'day');
@@ -391,10 +398,6 @@ function evaluateFilterCondition(columnValue: any, operator: string, filterValue
                 return mCol.isAfter(mFilter, 'day');
             case 'before':
                 return mCol.isBefore(mFilter, 'day');
-            case 'isEmpty':
-                return !columnValue;
-            case 'isNotEmpty':
-                return !!columnValue;
             default:
                 return true;
         }
@@ -417,11 +420,16 @@ function evaluateFilterCondition(columnValue: any, operator: string, filterValue
     // --- Select type logic (in, notIn, single select) ---
     if (type === 'select') {
         if (operator === 'in' || operator === 'notIn') {
-            if (Array.isArray(filterValue)) {
-                if (operator === 'in') return filterValue.includes(columnValue);
-                if (operator === 'notIn') return !filterValue.includes(columnValue);
+            const values = Array.isArray(filterValue)
+                ? filterValue
+                : [filterValue].filter((value) => value !== undefined && value !== null && value !== '');
+
+            if (values.length === 0) {
+                return operator === 'notIn';
             }
-            return false;
+
+            if (operator === 'in') return values.includes(columnValue);
+            if (operator === 'notIn') return !values.includes(columnValue);
         }
         if (operator === 'equals' || operator === 'notEquals') {
             return operator === 'equals'
@@ -431,6 +439,23 @@ function evaluateFilterCondition(columnValue: any, operator: string, filterValue
     }
 
     // --- Text/Number type logic ---
+    if (type === 'number') {
+        switch (operator) {
+            case 'equals':
+                return Number(columnValue) === Number(filterValue);
+            case 'notEquals':
+                return Number(columnValue) !== Number(filterValue);
+            case 'greaterThan':
+                return Number(columnValue) > Number(filterValue);
+            case 'greaterThanOrEqual':
+                return Number(columnValue) >= Number(filterValue);
+            case 'lessThan':
+                return Number(columnValue) < Number(filterValue);
+            case 'lessThanOrEqual':
+                return Number(columnValue) <= Number(filterValue);
+        }
+    }
+
     switch (operator) {
         case 'contains':
             return String(columnValue).toLowerCase().includes(String(filterValue).toLowerCase());
@@ -440,18 +465,14 @@ function evaluateFilterCondition(columnValue: any, operator: string, filterValue
             return String(columnValue).toLowerCase().startsWith(String(filterValue).toLowerCase());
         case 'endsWith':
             return String(columnValue).toLowerCase().endsWith(String(filterValue).toLowerCase());
+        case 'equals':
+            return columnValue === filterValue;
+        case 'notEquals':
+            return columnValue !== filterValue;
         case 'isEmpty':
             return columnValue === null || columnValue === undefined || columnValue === '';
         case 'isNotEmpty':
             return columnValue !== null && columnValue !== undefined && columnValue !== '';
-        case 'greaterThan':
-            return Number(columnValue) > Number(filterValue);
-        case 'greaterThanOrEqual':
-            return Number(columnValue) >= Number(filterValue);
-        case 'lessThan':
-            return Number(columnValue) < Number(filterValue);
-        case 'lessThanOrEqual':
-            return Number(columnValue) <= Number(filterValue);
         default:
             return true;
     }

package/src/lib/features/selection.feature.ts

@@ -101,6 +101,15 @@ export const SelectionFeature: TableFeature<any> = {
 
     // Define the feature's table instance methods
     createTable: <TData extends RowData>(table: Table<TData>): void => {
+        const getRowsForSelection = () => {
+            // In client mode with pagination we can inspect all loaded rows.
+            // In manual/server pagination only the loaded slice exists locally.
+            if (table.options.manualPagination) {
+                return table.getRowModel().rows;
+            }
+            return table.getPrePaginationRowModel?.().rows || table.getRowModel().rows;
+        };
+
         table.setSelectionState = (updater) => {
             if (!table.options.enableAdvanceSelection) return;
             const safeUpdater: Updater<SelectionState> = (old) => {
@@ -284,17 +293,14 @@ export const SelectionFeature: TableFeature<any> = {
         table.getSelectedRowIds = () => {
             const state = table.getSelectionState();
             if (state.type === 'exclude') {
-                console.warn(
-                    '[SelectionFeature] getSelectedRowIds() is not accurate in exclude mode. Use getSelectionState() to interpret selection properly.'
-                );
-                return []; // Return empty to avoid misleading API
+                return table.getSelectedRows().map((row) => row.id);
             }
             return state.ids;
         };
 
         table.getSelectedRows = () => {
             const state = table.getSelectionState();
-            const allRows = table.getRowModel().rows;
+            const allRows = getRowsForSelection();
 
             if (state.type === 'exclude') {
                 // Return all rows except excluded ones

package/src/lib/types/column.types.ts

@@ -24,6 +24,25 @@ declare module '@tanstack/react-table' {
         align?: 'left' | 'center' | 'right';
         filterable?: boolean;
         hideInExport?: boolean;
+        exportHeader?: string | ((context: {
+            columnId: string;
+            defaultHeader: string;
+            columnDef: ColumnDefBase<TData, TValue>;
+        }) => string);
+        exportValue?: (context: {
+            value: any;
+            row: TData;
+            rowIndex: number;
+            columnId: string;
+            columnDef: ColumnDefBase<TData, TValue>;
+        }) => any;
+        exportFormat?: 'auto' | 'string' | 'number' | 'boolean' | 'json' | 'date' | ((context: {
+            value: any;
+            row: TData;
+            rowIndex: number;
+            columnId: string;
+            columnDef: ColumnDefBase<TData, TValue>;
+        }) => any);
         wrapText?: boolean; // If true, text will wrap; if false, text will truncate with ellipsis (default: false)
         editComponent?: React.ComponentType<{
             value: any;
@@ -41,4 +60,4 @@ declare module '@tanstack/react-table' {
 }
 export type DataTableColumn<TData extends RowData, TValue = unknown> = ColumnDef<TData, TValue> & {
 // All custom properties are now defined in the module augmentation above
-}
+}

package/src/lib/types/data-table-api.ts

@@ -2,6 +2,25 @@ import { ColumnPinningState, SortingState, ColumnOrderState, TableState, Row, Ta
 
 import { ColumnFilterState } from './table.types';
 import { SelectionState } from '../features';
+import { ServerExportResult } from './export.types';
+
+export interface DataRefreshApiOptions {
+    resetPagination?: boolean;
+    force?: boolean;
+    reason?: string;
+}
+
+export type DataRefreshApiInput = boolean | DataRefreshApiOptions;
+
+export interface DataTableExportApiOptions {
+    filename?: string;
+    onlyVisibleColumns?: boolean;
+    onlySelectedRows?: boolean;
+    includeHeaders?: boolean;
+    chunkSize?: number;
+    strictTotalCheck?: boolean;
+    sanitizeCSV?: boolean;
+}
 
 export interface DataTableApi<T = any> {
     // Column Management
@@ -87,6 +106,8 @@ export interface DataTableApi<T = any> {
         // Selection state getters
         getSelectionState: () => SelectionState; // Get selection state
         getSelectedCount: () => number; // Get total selected count
+        // Returns selected rows that are currently loaded in the table instance.
+        // For server/manual pagination, use getSelectionState() for full selection intent.
         getSelectedRows: () => Row<T>[]
         // Selection state checks
         isRowSelected: (rowId: string) => boolean;
@@ -95,9 +116,9 @@ export interface DataTableApi<T = any> {
     // Data Management
     data: {
         // Refresh data with pagination reset
-        refresh: (resetPagination?: boolean) => void;
+        refresh: (options?: DataRefreshApiInput) => void;
         // Reload data without all current states
-        reload: () => void;
+        reload: (options?: DataRefreshApiOptions) => void;
         // Reset all data to initial state
         resetAll: () => void;
 
@@ -148,24 +169,21 @@ export interface DataTableApi<T = any> {
 
     // Simplified Export
     export: {
-        exportCSV: (options?: {
-            filename?: string;
-            onlyVisibleColumns?: boolean;
-            onlySelectedRows?: boolean;
-            includeHeaders?: boolean;
-        }) => Promise<void>;
-        exportExcel: (options?: {
-            filename?: string;
-            onlyVisibleColumns?: boolean;
-            onlySelectedRows?: boolean;
-            includeHeaders?: boolean;
-        }) => Promise<void>;
+        exportCSV: (options?: DataTableExportApiOptions) => Promise<void>;
+        exportExcel: (options?: DataTableExportApiOptions) => Promise<void>;
         exportServerData: (options: {
             format: 'csv' | 'excel';
             filename?: string;
-            fetchData: (filters?: Partial<TableState>) => Promise<{ data: T[]; total: number }>;
+            fetchData: (
+                filters?: Partial<TableState>,
+                selection?: SelectionState,
+                signal?: AbortSignal
+            ) => Promise<ServerExportResult<T>>;
             pageSize?: number;
             includeHeaders?: boolean;
+            chunkSize?: number;
+            strictTotalCheck?: boolean;
+            sanitizeCSV?: boolean;
         }) => Promise<void>;
         isExporting: () => boolean;
         cancelExport: () => void;

package/src/lib/types/data-table.types.ts

@@ -9,10 +9,54 @@ import { DataTableSlots, PartialSlotProps } from './slots.types';
 import { DataTableSize } from '../utils/table-helpers';
 import { SelectionState, SelectMode } from '../features';
 import { DataTableLoggingOptions } from '../utils/logger';
+import { ExportConcurrencyMode, ExportProgressPayload, ExportStateChange, ServerExportResult } from './export.types';
 
 // Dynamic data management interfaces
 // TableFilters now imported from types folder
 
+export type DataRefreshReason = 'initial' | 'state-change' | 'refresh' | 'reload' | 'reset' | string;
+
+export interface DataFetchMeta {
+    reason?: DataRefreshReason;
+    force?: boolean;
+}
+
+export interface DataRefreshOptions extends DataFetchMeta {
+    resetPagination?: boolean;
+}
+
+export interface DataRefreshContext {
+    filters: Partial<TableFilters>;
+    state: Partial<TableState>;
+    options: Required<Pick<DataRefreshOptions, 'resetPagination' | 'force'>> & {
+        reason: string;
+    };
+}
+
+export type DataMutationAction =
+    | 'updateRow'
+    | 'updateRowByIndex'
+    | 'insertRow'
+    | 'deleteRow'
+    | 'deleteRowByIndex'
+    | 'deleteSelectedRows'
+    | 'replaceAllData'
+    | 'updateMultipleRows'
+    | 'insertMultipleRows'
+    | 'deleteMultipleRows'
+    | 'updateField'
+    | 'updateFieldByIndex';
+
+export interface DataMutationContext<T> {
+    action: DataMutationAction;
+    previousData: T[];
+    nextData: T[];
+    rowId?: string;
+    index?: number;
+    rowIds?: string[];
+    totalRow?: number;
+}
+
 export interface DataTableProps<T> {
     // Core data props
     // columns: DataTableColumn<T>[] | AccessorKeyColumnDef <T, string>[];
@@ -28,16 +72,27 @@ export interface DataTableProps<T> {
     initialState?: Partial<TableState>;
     initialLoadData?: boolean; // Initial load data (default: true)
     onDataStateChange?: (filters: Partial<TableState>) => void; // Callback when any filter/state changes
-    onFetchData?: (filters: Partial<TableFilters>) => Promise<{ data: T[]; total: number }>;
+    onFetchData?: (filters: Partial<TableFilters>, meta?: DataFetchMeta) => Promise<{ data: T[]; total: number }>;
+    onRefreshData?: (context: DataRefreshContext) => void | Promise<void>;
+    onDataChange?: (nextData: T[], context: DataMutationContext<T>) => void;
 
     // Simplified Export props
     exportFilename?: string;
-    onExportProgress?: (progress: { processedRows?: number; totalRows?: number; percentage?: number }) => void;
+    exportConcurrency?: ExportConcurrencyMode;
+    exportChunkSize?: number;
+    exportStrictTotalCheck?: boolean;
+    exportSanitizeCSV?: boolean;
+    onExportProgress?: (progress: ExportProgressPayload) => void;
     onExportComplete?: (result: { success: boolean; filename: string; totalRows: number }) => void;
     onExportError?: (error: { message: string; code: string }) => void;
+    onExportStateChange?: (state: ExportStateChange) => void;
 
     // Server export callback - receives current table state/filters and selection data
-    onServerExport?: (filters?: Partial<TableState>, selection?: SelectionState) => Promise<{ data: any[]; total: number }>;
+    onServerExport?: (
+        filters?: Partial<TableState>,
+        selection?: SelectionState,
+        signal?: AbortSignal
+    ) => Promise<ServerExportResult<any>>;
 
     // Export cancellation callback - called when export is cancelled
     onExportCancel?: () => void;

package/src/lib/types/export.types.ts

@@ -6,6 +6,64 @@
 import { TableState } from './table.types';
 
 
+export type ExportFormat = 'csv' | 'excel';
+export type ExportConcurrencyMode = 'ignoreIfRunning' | 'cancelAndRestart' | 'queue';
+export type ExportPhase =
+    | 'starting'
+    | 'fetching'
+    | 'processing'
+    | 'downloading'
+    | 'completed'
+    | 'cancelled'
+    | 'error';
+
+export type ExportValueFormat = 'auto' | 'string' | 'number' | 'boolean' | 'json' | 'date';
+
+export interface ExportStateChange {
+    phase: ExportPhase;
+    mode: 'client' | 'server';
+    format: ExportFormat;
+    filename: string;
+    processedRows?: number;
+    totalRows?: number;
+    percentage?: number;
+    message?: string;
+    code?: string;
+    startedAt?: number;
+    endedAt?: number;
+    queueLength?: number;
+}
+
+export interface ExportProgressPayload {
+    processedRows?: number;
+    totalRows?: number;
+    percentage?: number;
+}
+
+export interface ServerExportDataResult<T = any> {
+    data: T[];
+    total: number;
+}
+
+export interface ServerExportBlobResult {
+    blob: Blob;
+    filename?: string;
+    mimeType?: string;
+    total?: number;
+}
+
+export interface ServerExportFileUrlResult {
+    fileUrl: string;
+    filename?: string;
+    mimeType?: string;
+    total?: number;
+}
+
+export type ServerExportResult<T = any> =
+    | ServerExportDataResult<T>
+    | ServerExportBlobResult
+    | ServerExportFileUrlResult;
+
 /**
  * Server export column configuration
  */
@@ -21,7 +79,7 @@ export interface ServerExportColumn<T = any> {
  */
 export interface ExportOptions {
     filename?: string;
-    format: 'csv' | 'excel';
+    format: ExportFormat;
     includeHeaders?: boolean;
     onlyVisibleColumns?: boolean;
     onlyFilteredData?: boolean;
@@ -37,11 +95,11 @@ export interface ExportOptions {
  * Export progress information
  */
 export interface ExportProgress {
-    processedRows: number;
-    totalRows: number;
-    percentage: number;
-    currentChunk: number;
-    totalChunks: number;
+    processedRows?: number;
+    totalRows?: number;
+    percentage?: number;
+    currentChunk?: number;
+    totalChunks?: number;
     estimatedTimeRemaining?: number;
 }
 
@@ -62,7 +120,7 @@ export interface ExportResult {
  */
 export interface ExportError {
     message: string;
-    code: 'CANCELLED' | 'MEMORY_ERROR' | 'PROCESSING_ERROR' | 'UNKNOWN';
+    code: 'CANCELLED' | 'MEMORY_ERROR' | 'PROCESSING_ERROR' | 'UNKNOWN' | 'EXPORT_IN_PROGRESS';
     details?: any;
 }
 
@@ -71,13 +129,16 @@ export interface ExportError {
  */
 export interface ExportConfig {
     enabled: boolean;
-    formats: ('csv' | 'excel')[];
+    formats: ExportFormat[];
     filename?: string;
     includeHeaders?: boolean;
     onlyVisibleColumns?: boolean;
     onlyFilteredData?: boolean;
     // New configuration for large datasets
     chunkSize?: number;
+    strictTotalCheck?: boolean;
+    sanitizeCSV?: boolean;
+    concurrency?: ExportConcurrencyMode;
     enableProgressTracking?: boolean;
     maxMemoryThreshold?: number; // MB
 }
@@ -124,10 +185,13 @@ export interface PinnedColumnStyleOptions {
 
 export interface SimpleExportOptions {
     filename?: string;
-    format: 'csv' | 'excel';
+    format: ExportFormat;
     includeHeaders?: boolean;
     onlyVisibleColumns?: boolean;
     onlySelectedRows?: boolean;
+    chunkSize?: number;
+    strictTotalCheck?: boolean;
+    sanitizeCSV?: boolean;
 }
 
 /**
@@ -141,7 +205,11 @@ export interface SelectionExportData {
 }
 
 export interface ServerExportOptions extends SimpleExportOptions {
-    fetchData: (filters?: Partial<TableState>, selection?: SelectionExportData) => Promise<{ data: any[]; total: number }>;
+    fetchData: (
+        filters?: Partial<TableState>,
+        selection?: SelectionExportData,
+        signal?: AbortSignal
+    ) => Promise<ServerExportResult<any>>;
     currentFilters?: any; // Current table filters/state
     pageSize?: number;
     selection?: SelectionExportData;
@@ -151,4 +219,5 @@ export interface ExportCallbacks {
     onProgress?: (progress: ExportProgress) => void;
     onComplete?: (result: ExportResult) => void;
     onError?: (error: ExportError) => void;
+    onStateChange?: (state: ExportStateChange) => void;
 }

package/src/lib/types/slots.types.ts

@@ -14,7 +14,7 @@ import { TableProps, TableContainerProps, BoxProps, ToolbarProps, TableRowProps,
 import { Table, Row, Column } from '@tanstack/react-table';
 import { ComponentType, ReactNode, HTMLAttributes, ComponentProps } from 'react';
 
-import { DataTableColumn, TableFilters, ExportProgress, ExportResult, ExportError, ServerExportColumn } from './index';
+import { DataTableColumn, TableFilters, ExportProgress, ExportResult, ExportError, ServerExportColumn, ExportStateChange } from './index';
 import { DataTableSize } from '../utils/table-helpers';
 import { DataTablePaginationProps } from "../components/pagination";
 import { DataTableToolbarProps } from '../components/toolbar/data-table-toolbar';
@@ -83,6 +83,7 @@ export interface DataTableSlots<T = any> {
         onExportComplete?: (result: ExportResult) => void;
         onExportError?: (error: ExportError) => void;
         onExportCancel?: () => void;
+        onExportStateChange?: (state: ExportStateChange) => void;
     }>>;
 
     header?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, TableHeadProps & {
@@ -209,6 +210,7 @@ export interface DataTableSlots<T = any> {
         onExportComplete?: (result: ExportResult) => void;
         onExportError?: (error: ExportError) => void;
         onExportCancel?: () => void;
+        onExportStateChange?: (state: ExportStateChange) => void;
     }>>;
 
     refreshButton?: SlotComponent<EnhancedSlotProps<BaseSlotProps<T>, ComponentProps<'button'> & {

package/src/lib/types/table.types.ts

@@ -49,12 +49,10 @@ export interface TableFilters {
     };
 }
 
-export interface TableFiltersForFetch {
+export interface TableFiltersForFetch extends Partial<TableFilters> {
     search?: string;
     page?: number;
     pageSize?: number;
-    sorting?: SortingState;
-    columnFilter?: ColumnFilterState;
 }
 
 export interface ColumnFilterState {

package/src/lib/utils/debounced-fetch.utils.ts

@@ -1,53 +1,125 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-import { TableFiltersForFetch } from '../types';
+import { DataFetchMeta, TableFilters } from '../types';
 
 const DEFAULT_DEBOUNCE_DELAY = 300;
 
- interface useDebouncedFetchReturn<T extends Record<string, any>> {
-    debouncedFetch: (filters: TableFiltersForFetch, debounceDelay?: number) => Promise<{ data: T[]; total: number }>;
+interface DebouncedFetchOptions {
+    debounceDelay?: number;
+    meta?: DataFetchMeta;
+}
+
+interface useDebouncedFetchReturn<T extends Record<string, any>> {
+    debouncedFetch: (
+        filters: Partial<TableFilters>,
+        optionsOrDelay?: number | DebouncedFetchOptions
+    ) => Promise<{ data: T[]; total: number } | null>;
     isLoading: boolean;
 }
 
+interface PendingRequest<T extends Record<string, any>> {
+    id: number;
+    resolve: (value: { data: T[]; total: number } | null) => void;
+    reject: (reason?: unknown) => void;
+}
+
 export function useDebouncedFetch<T extends Record<string, any>>(
-    onFetchData: ((filters: TableFiltersForFetch) => Promise<{ data: T[]; total: number }>) | undefined
+    onFetchData: ((
+        filters: Partial<TableFilters>,
+        meta?: DataFetchMeta
+    ) => Promise<{ data: T[]; total: number }>) | undefined
 ): useDebouncedFetchReturn<T> {
     const [isLoading, setIsLoading] = useState(false);
     const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const pendingRequestRef = useRef<PendingRequest<T> | null>(null);
+    const latestRequestIdRef = useRef(0);
+    const activeRequestCountRef = useRef(0);
+    const isMountedRef = useRef(true);
 
-    const debouncedFetch = useCallback(async (filters: TableFiltersForFetch, debounceDelay = DEFAULT_DEBOUNCE_DELAY) => {
+    const resetLoadingIfIdle = useCallback(() => {
+        if (!isMountedRef.current) return;
+        if (!debounceTimer.current && !pendingRequestRef.current && activeRequestCountRef.current === 0) {
+            setIsLoading(false);
+        }
+    }, []);
+
+    const debouncedFetch = useCallback(async (
+        filters: Partial<TableFilters>,
+        optionsOrDelay: number | DebouncedFetchOptions = DEFAULT_DEBOUNCE_DELAY
+    ) => {
         if (!onFetchData) return null;
 
-        // Create a unique key for the current fetch parameters
-        // const currentParams = JSON.stringify(filters);
-        // Clear existing timer
+        const options = typeof optionsOrDelay === 'number'
+            ? { debounceDelay: optionsOrDelay }
+            : optionsOrDelay;
+        const debounceDelay = options.debounceDelay ?? DEFAULT_DEBOUNCE_DELAY;
+        const requestId = latestRequestIdRef.current + 1;
+        latestRequestIdRef.current = requestId;
+
+        // Clear existing timer and resolve pending debounced request.
         if (debounceTimer.current) {
             clearTimeout(debounceTimer.current);
+            debounceTimer.current = null;
         }
+        if (pendingRequestRef.current) {
+            pendingRequestRef.current.resolve(null);
+            pendingRequestRef.current = null;
+        }
+
+        setIsLoading(true);
+
+        return new Promise<{ data: T[]; total: number } | null>((resolve, reject) => {
+            pendingRequestRef.current = {
+                id: requestId,
+                resolve,
+                reject,
+            };
 
-        return new Promise<{ data: T[]; total: number } | null>((resolve) => {
             debounceTimer.current = setTimeout(async () => {
-                setIsLoading(true);
+                const pendingRequest = pendingRequestRef.current;
+                if (!pendingRequest || pendingRequest.id !== requestId) {
+                    return;
+                }
+
+                pendingRequestRef.current = null;
+                debounceTimer.current = null;
+                activeRequestCountRef.current += 1;
+
                 try {
-                    const result = await onFetchData(filters);
-                    resolve(result);
+                    const result = await onFetchData(filters, options.meta);
+
+                    // Ignore stale responses if a newer request was queued.
+                    if (requestId === latestRequestIdRef.current) {
+                        resolve(result);
+                    } else {
+                        resolve(null);
+                    }
                 } catch (error) {
-                    // Handle fetch error silently or could be passed to onError callback
-                    console.error('Error fetching data:', error);
-                    resolve(null);
+                    if (requestId === latestRequestIdRef.current) {
+                        reject(error);
+                    } else {
+                        resolve(null);
+                    }
                 } finally {
-                    setIsLoading(false);
+                    activeRequestCountRef.current = Math.max(0, activeRequestCountRef.current - 1);
+                    resetLoadingIfIdle();
                 }
             }, debounceDelay);
         });
-    }, [onFetchData]);
+    }, [onFetchData, resetLoadingIfIdle]);
 
     // Cleanup timer on unmount
     useEffect(() => {
-        // Fetch data when dependencies change
+        isMountedRef.current = true;
         return () => {
+            isMountedRef.current = false;
             if (debounceTimer.current) {
                 clearTimeout(debounceTimer.current);
+                debounceTimer.current = null;
+            }
+            if (pendingRequestRef.current) {
+                pendingRequestRef.current.resolve(null);
+                pendingRequestRef.current = null;
             }
         };
     }, []);