fix endless loop

Author: Gianmarco Manni

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## Fixed
+
+- endless loop on `pagination` state when paginating client-side
+
 ## [5.0.1] - 2024-03-27
 
 ### Fixed

src/lib/useReactDataTable/useReactDataTable.tsx

@@ -9,6 +9,7 @@ import { getModelFromColumnFilter } from "../utils/getModelFromColumnFilter";
 import { getSortingStateFromModel } from "../utils/getSortingStateFromModel";
 import { getModelFromSortingState } from "../utils/getModelFromSortingState";
 import { OptionalNullable } from "../types/NullableTypes";
+import { useMemo } from "react";
 
 /**
  * A react hook that returns a react table instance and the state of the table
@@ -63,31 +64,30 @@ const useReactDataTable = <TData, TFilter extends FilterModel = Record<string, n
   }));
   const skeletonData = Array.from({ length: paginationInternal.pageSize }, () => ({} as TData));
 
+  const columnFilters = useMemo(() => getColumnFilterFromModel(effectiveColumnFilters), [effectiveColumnFilters]);
+  const sorting = useMemo(() => getSortingStateFromModel(effectiveSorting), [effectiveSorting]);
+
   const table = useReactTable<TData>({
     data: isLoading ? skeletonData : data,
     columns: isLoading ? skeletonColumns : internalColumns,
 
     onColumnFiltersChange: (filtersOrUpdaterFn) => {
-      const newFilter =
-        typeof filtersOrUpdaterFn !== "function"
-          ? filtersOrUpdaterFn
-          : filtersOrUpdaterFn(getColumnFilterFromModel(effectiveColumnFilters));
+      const newFilter = typeof filtersOrUpdaterFn !== "function" ? filtersOrUpdaterFn : filtersOrUpdaterFn(columnFilters);
       return effectiveOnColumnFiltersChange(getModelFromColumnFilter(newFilter));
     },
     onPaginationChange: (paginationOrUpdaterFn) => {
       const newFilter = typeof paginationOrUpdaterFn !== "function" ? paginationOrUpdaterFn : paginationOrUpdaterFn(effectivePagination);
       return effectiveOnPaginationChange(newFilter);
     },
     onSortingChange: (sortingOrUpdaterFn) => {
-      const newFilter =
-        typeof sortingOrUpdaterFn !== "function" ? sortingOrUpdaterFn : sortingOrUpdaterFn(getSortingStateFromModel(effectiveSorting));
+      const newFilter = typeof sortingOrUpdaterFn !== "function" ? sortingOrUpdaterFn : sortingOrUpdaterFn(sorting);
       return effectiveOnSortingChange(getModelFromSortingState(newFilter));
     },
 
     state: {
-      columnFilters: getColumnFilterFromModel(effectiveColumnFilters),
+      columnFilters,
       pagination: effectivePagination,
-      sorting: getSortingStateFromModel(effectiveSorting),
+      sorting,
     },
 
     initialState: {