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;