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
You're missing the column variable as a dependency in the useMemo of useTableData. Adding this will fix the issue.
const tableColumns = useMemo(() => {
return buildTableColumns(columns);
}, [columns]);
Here's a fork of your sandbox showing the effect of the change https://codesandbox.io/s/fervent-jepsen-657lm