Code example: https://codesandbox.io/s/nice-cherry-z8hn9

I'm using react-table to create a table component that receives a configuration object with options + columns configuration.

I have created 2 components, a TableInstance and a Table

The TableInstance component handles the data and state of the Table and the Table only handles de UI rendering.

I have also created 2 custom hooks that handle state and data in the TableInstance component.

Hook 1, called useTableState, has a simple reducer that sets the pageSize and the current page

Hook 2, called useTableData makes a query and returns the data plus it also returns the columns configuration that react-table needs.

Following the examples in the react-table docs, I created 2 useEffect hooks (TableInstance.js lines 33 and 38) that react when the state from the table changes on pagination, when that happens, I dispatch an action in the useTableState reducer that updates the state to set the pageSize and page.

The problem occurs when I set manualPagination: false. I get Maximum update depth exceeded because TableInstance constantly re-renders. I don't know what causes the re-renders. If instead of using useReducer I use useState then the error doesn't happen. You can check it our yourself, in the hook useTableState I left the useState approach commented, if you just comment the dispatchers and uncomment the setState then you will the error dissapear.

Again, the problem is ONLY when using manualPagination: false, if I then use manualPagination: true controlling the pagination myself then there is no problem. You can also try it yourself changing the configuration in the tableConfig file

Would really appreciate some help as I'm a bit lost here , what am I not seeing that causes this issue?

TLDR: useReducer in combination with react-table pagination causes an infinite loop of re-renders that gets fixed if I change the approach to useState instead

Code example: https://codesandbox.io/s/nice-cherry-z8hn9