usePagination + redux

[IronTony]

Hi all,
I have read quite all the posts about this argument but I am still going crazy, because it is not working.

I have a page that calls a component (Table) and passing to it some props, eg. columns, data, totalCount (taken from redux selectors) and currentPage (taken from redux selectors).

In my Table component I have this:

{
      columns,
      data,
      initialState: {
        pageIndex: 0,
        pageSize: itemsPerPage,
      },
      manualPagination: true, // Tell the usePagination
      pageCount: totalPages,
    },

and also:

React.useEffect(() => {
  fetchData && fetchData({ pageIndex, pageSize });
}, [fetchData, pageIndex, pageSize]);

In my page, I have the dispatch like this:

const fetchData = useCallback(
    ({ pageSize, pageIndex }) => {
      dispatch(getAllPrograms({ page: pageIndex + 1, itemsPerPage: pageSize }));
    },
    [dispatch],
  );

My actual problem is that when I press the next arrow, it seems to work, but it calls page 2 and again page 1.

Any help would be more than appreciated.

[IronTony]

Just wrap the dispatch with this:

const fetchId = ++fetchIdRef.current;
      if (fetchId === fetchIdRef.current) {
  dispatch()
}