react and react table: Problem with Maximum update depth exceeded - reactjs

Question

I'm getting this error when rendering a react-table in React typescript
caught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
That is the code related to this:
import {useEffect, useMemo, useState} from "react";
import ManagementService from "../services/ManagementService";
import MasterSet from "../model/MasterSet";
import {Column, useTable} from "react-table";
const ShowMastersets: React.FC = () => {
const [mastersets, setMastersets] = useState<Array<MasterSet>>([]);
const [searchName, setSearchName] = useState("");
useEffect(() => {
retrieveMastersets();
}, []);
const columns: Array<Column<MasterSet>> = [
{
Header: "Masterset ID",
accessor: "mastersetId"
},
{
Header: "Masterset Name",
accessor: "mastersetName"
},
{
Header: "Key Name",
accessor: "keyName"
},
{
Header: "Key Start Time",
accessor: "keyStartTime"
}
];
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({
columns,
data: mastersets
});
return (
<div className="list row">
<div className="col-md-12 list">
<table
className="table table-striped table-bordered"
{...getTableProps()}
>
<thead>
{headerGroups.map((headerGroup: any) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column: any) => (
<th {...column.getHeaderProps()}>
{column.render("Header")}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
);
})}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
};
export default ShowMastersets;
Does anybody see what I am doing wrong? I have removed the parts of the controller which are not needed.

Answer 1

I would offer 2 suggestions to deal with this error: 1) create a type for your data, e.g.
export type MasterSet = {
mastersetId: string;
...
}
Then you can memoize it as follows:
const columns: Column<MasterSet>[] = useMemo(() => [
...
],[masterSet]);
turn autoResetPage to false in your useTable instance, like this:
...
const tableInstance: TableInstance = useTable(
{ columns, data, useSortBy, useExpanded,
initialState: { pageSize: 10, }, autoResetPage: false },
...allHooks
);
...
The latter especially should sort out the problem.