Infinite loop when server-side paging with redux dispatch in fetchData function

[edwinhaver]

Hi all,

I am using the example code "Pagination (Controlled)" for server-side pagination, however as soon as I use the dispatch method of redux in the main fetchData function that is passed to the table, then it keeps on triggering fetchData. Does anyone know why that is and how to stop this behaviour?

This is the fetchData function that is passed to the table:

const fetchData = useCallback((pageIndex, pageSize) => {
    console.log(`fetchData(${pageIndex}, ${pageSize})`)
    dispatch(queryCountries(pageIndex + 1, pageSize))
}, [])

And this is the useEffect in the Table component to trigger the fetchData function:

useEffect(() => {
    console.log(`pageIndex: ${pageIndex}, pageSize: ${pageSize}`)
    fetchData(pageIndex, pageSize)
}, [pageIndex, pageSize, fetchData])

pageIndex and pageSize do not change but it seems that it is caused by the dispatch in the fetchData function as when I remove it this behaviour is not there.

Note that the dispatch queries the country collection and the data is passed to the Table component. The following statement listens to the changed data:

const data = useMemo(() => countries, [countries])