[ad_1]
I’m relatively new to React and trying to understand how this code I’m working with is causing an infinite render loop. I’ve written an example of the code below that shows the issue. The error message I’m getting is: “Too many re-renders. React limits the number of renders to prevent an infinite loop.”
The props being passed to DataTable appear to be causing the issue. When one of the lines is commented out, there isn’t any problems. However, when both data
and paginationDefaultPage
are passed in, there’s an infinite loop. data
is being passed as a prop to CustomDataTable
and in this example the data is just a hardcoded array.
My current understanding is that a re-render should only occur when state is changed, but as far as I can tell, state isn’t being changed (the state is initialized in the CustomDataTable constructor but then never changed).
I’ve posted the code below, but you can also view it here: https://codesandbox.io/s/bitter-fire-g948qi
App.js
import "./styles.css";
import CustomDataTable from "./CustomDataTable";
// Utility function
function convertUnixTimestamp(timestamp) {
const d = new Date(timestamp);
const month = d.getMonth().toString().padStart(2, "0");
const date = d.getDate().toString().padStart(2, "0");
const hour = d.getUTCHours().toString().padStart(2, "0");
const minutes = d.getMinutes().toString().padStart(2, "0");
const seconds = d.getSeconds().toString().padStart(2, "0");
return `${d.getFullYear()}/${month}/${date} ${hour}:${minutes}:${seconds}`;
}
export default function App() {
const columns = [
{ name: "Import ID", selector: (row) => row[0], sortable: true },
{
name: "Timestamp",
selector: (row) => convertUnixTimestamp(row[1]),
sortable: true
}
];
return (
<div className="App">
<CustomDataTable
columns={columns}
data={[["239482398492839482", "2022-05-31 16:03"]]}
/>
</div>
);
}
CustomDataTable.js
import React from "react";
import DataTable from "react-data-table-component-with-filter";
class CustomDataTable extends React.Component {
constructor(props) {
super(props);
console.log("CustomDataTable constructor");
this.state = {
data: props.data,
filteredItems: props.data,
filterText: "",
resetPaginationToggle: false
};
}
render() {
// Uncommenting data={this.state.filteredItems} and commenting out paginationDefaultPage={this.state.resetPaginationToggle}
// prevents the infinite loop and shows the data as expected with no problems
// Commenting out data={this.state.filteredItems} and leaving paginationDefaultPage=
// {this.state.resetPaginationToggle} doesn't cause any problems
// Uncommenting both lines causes an infinite loop
return (
<DataTable
columns={this.props.columns}
// data={this.state.filteredItems}
paginationDefaultPage={this.state.resetPaginationToggle}
pagination
persistTableHead
subHeader
/>
);
}
}
export default CustomDataTable;
[ad_2]