[bug]: DataTable pagination works in dev but crashes in production

[yassir-jeraidi]

Describe the bug

Description

I’m using the DataTable component in a project. In development mode, pagination works as expected. However, in production the table sometimes crashes and does not respond when fetching new data.

Expected Behavior

Pagination should work consistently in both development and production.

Actual Behavior

Works fine in dev mode.

In production, the DataTable sometimes crashes or becomes unresponsive when fetching data.

Additional Details

I’m using React Query with nuqs, but I also tested without React Query and experienced the same issue.

Code :

import {SearchParams} from "@/types";
import {
    HydrationBoundary,
    dehydrate,
} from "@tanstack/react-query";
import RatesTable from "@/features/settings/rates/components/rates-table";
import {rateService} from "@/features/settings/rates/services/rate-service";
import {rateKeys} from "@/features/settings/rates/hooks/use-rates";
import {fetchAndPrefetch} from "@/lib/react-query/fetch-and-prefetch";
import {Rate} from "@/features/settings/rates/interfaces";
import {Suspense} from "react";
import {DataTableSkeleton} from "@/components/data-table/data-table-skeleton";
import {rateSearchParamsCache} from "@/features/settings/rates/parsers";
import {getApiQuery} from "@/lib/spatie-query-builder/query";

interface RatesPageProps {
    searchParams: Promise<SearchParams>;
}

export default async function RatesPage(props: RatesPageProps) {

    const searchParams = await props.searchParams;
    const search = rateSearchParamsCache.parse(searchParams);

    const {query , queryString} = await getApiQuery(search);

    const {queryClient} = await fetchAndPrefetch<Rate>({
        queryKey: rateKeys.list,
        queryFn: rateService.findAll,
        prefetch: true,
        params: query,
        isFiltering: (params) => Object.keys(params).length > 0,
        getPageMeta: (data) => data.meta,
    });

    return (
        <div className="[--header-height:calc(--spacing(14))]">
            <div className="flex flex-col">
                <div className="flex flex-wrap justify-between items-center mb-4">
                    <h1 className="text-2xl font-bold mb-4">La liste des tarifs</h1>
                </div>
                <Suspense
                    fallback={
                        <DataTableSkeleton
                            columnCount={7}
                            filterCount={2}
                            cellWidths={[
                                "10rem",
                                "30rem",
                                "10rem",
                                "10rem",
                                "6rem",
                                "6rem",
                                "6rem",
                            ]}
                            shrinkZero
                        />
                    }
                >
                    <HydrationBoundary state={dehydrate(queryClient)}>
                        <RatesTable query={queryString}/>
                    </HydrationBoundary>
                </Suspense>
            </div>
        </div>
    );
}

"use client";

import { useDataTable } from "@/hooks/use-data-table";
import { DataTable } from "@/components/data-table/data-table";
import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
import TableSkeleton from "@/components/skeleton/table-skeleton";
import {useRates} from "@/features/settings/rates/hooks/use-rates";
import {rateColumns} from "@/features/settings/rates/components/columns"
import {PaginatedResponse} from "@/types";
import {Rate} from "@/features/settings/rates/interfaces";

interface RatesTableProps {
    query : string;
}

export default function RatesTable({query} : RatesTableProps) {

    const {
		getAll: { data: paginatedResponse, isLoading, isFetching },
	} = useRates({
        requestOptions: {
            paginated: true,
            params: query,
        },
	});

	const { table } = useDataTable({
		data: paginatedResponse?.data || [],
		columns: rateColumns,
		pageCount: paginatedResponse?.meta?.last_page || 0,
		getRowId: (originalRow) => originalRow.id.toString(),
		shallow: false,
		clearOnDefault: true,
		debounceMs: 600,
	});

	if (isFetching || isLoading) {
		return <TableSkeleton />;
	}

	return (
		<DataTable table={table}>
			<DataTableToolbar table={table}>
				<DataTableSortList table={table} align="end" />
			</DataTableToolbar>
		</DataTable>
	);
}

How to reproduce

Steps to Reproduce

• Use the DataTable with pagination.

• Run the app in production mode (next build && next start).

• Navigate through pages.

• Observe that sometimes the table does not update or crashes.

Link to reproduction

.

Additional information

No response