Material React Table pagination not working as expected.Manual pagination unwanted rerender issue during state change

Question

const UsersComponents = ({ showCreateUser, setShowCreateUser }) => {
  const theme = useTheme();
  const [validationErrors, setValidationErrors] = useState({});
  
  const [tableData, setTableData] = useState([]);
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10,
  });

  const handlePaginationChange = (updater) => {
    setPagination((oldPagination) => {
      const newPagination =
        typeof updater === "function" ? updater(oldPagination) : updater;

      console.log("Updated pagination:", newPagination); // Debug the new pagination state
      return newPagination;
    });
  };


  const queryClient = useQueryClient();

  const {
    data: fetchedUsers = [],
    isError: isLoadingUsersError,
    isFetching: isFetchingUsers,
    refetch,
  } = useQuery({
    queryKey: ["users", pagination.pageIndex, pagination.pageSize],
    refetchOnWindowFocus: false,
    placeholderData: keepPreviousData,
    queryFn: async () => {
      const response = await fetchUsers({
        offset: pagination.pageIndex * pagination.pageSize,
        limit: pagination.pageSize,
      });
      console.log(response, "response chk");
      return response;
    },
  });

  const { data: userCount = 0 } = useQuery({
    queryKey: ["totalCount"],
    queryFn: fetchUserCount,
    refetchOnWindowFocus: false,
  });

  
  const tableColumns = useMemo(
    () => columns(validationErrors, setValidationErrors),
    [validationErrors]
  );


  const table = useMaterialReactTable({
    columns: tableColumns,
    data: fetchedUsers,
    pageCount: Math.ceil(userCount / pagination.pageSize),
    onPaginationChange: handlePaginationChange,
    pagination,
    muiPaginationProps: {
      color: "primary",
      shape: "rounded",
      showRowsPerPage: false,
      variant: "outlined",
    },
    mrtTheme: (theme) => ({
      baseBackgroundColor: theme.palette.background.paper,
    }),
    manualPagination: true,
    createDisplayMode: "modal", //default ('row', and 'custom' are also available)
    editDisplayMode: "row", //default ('row', 'cell', 'table', and 'custom' are also available)
    enableEditing: true,
    paginationDisplayMode: "pages",
    paginateExpandedRows: true,
    enableRowSelection: true,
    enableFullScreenToggle: false,
    enableDensityToggle: false,
    columnFilterDisplayMode: "popover",
    positionToolbarAlertBanner: "bottom",
    positionGlobalFilter: "left",
    getRowId: (row) => row.id,
    muiSearchTextFieldProps: {
      placeholder: "Search all users",
      variant: "outlined",
    },
    muiToolbarAlertBannerProps: isLoadingUsersError
      ? {
          color: "error",
          children: "Error loading data",
        }
      : undefined,
    muiTableContainerProps: {
      sx: {
        minHeight: "500px",
      },
    },
    
    state: {
      pagination,
      isLoading: isFetchingUsers,
      isSaving: isCreatingUser || isUpdatingUser || isDeletingUser,
      showAlertBanner: isLoadingUsersError,
      showProgressBars: isFetchingUsers,
    },
  });

  return (
    <>
      <MaterialReactTable table={table} />
    </>
  );
};

const queryClient = new QueryClient();

const UserManagement = ({ showCreateUser, setShowCreateUser }) => (
  <QueryClientProvider client={queryClient}>
    <UsersComponents
      showCreateUser={showCreateUser}
      setShowCreateUser={setShowCreateUser}
    />
  </QueryClientProvider>
);

export default UserManagement;

The issue is that when I click the page 2 of pagination, pagination.pageIndex is updated to 1 from 0 ,but immediately ,its state is again updated to 0 .This causes the a flicker to page 2 and return to page 1.But after this every subsequent page change works fine.

I had tried removing pagination state from const table= useMaterialReact table ,and also from the state prop under it.This causes the pagination to work properly without and re renders,but now,the ui pagination state,that is the 1,2, numbering at the bottom of table remains unchanged.The page is being changed,but the ui of pages remains same now.

I tried using api call using useffect instead of query ,but result remains the same.The issue seems to be in the state change.

Any help is highy appreciated.

Answer 1

-I fixed it by adding page: pagination.pageIndex + 1, to muiPaginationProps of table. -Removed pagination from state and table

Answer 2

Try setting your pagination in initialState as well. Fixed this problem for me.